值 | 描述 |
---|---|
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
层级关系为:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
为改变参照物(橘色框)后的效果
层级关系为:
<div ——————————— position:relative;最近的祖先定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
参照物为最顶级的元素情况。
层级关系为:
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
仅使用margin属性布局绝对定位元素的情况
此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。
图9中,使用margin属性布局相对定位元素。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图:
IE6的情况下,box2前面没有兄弟节点,则margin-left的值会出现双倍边距,见图10。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果图:
- 推荐文章
- Android studio 入门教程(案例)
- Android studio 入门教程(案例)
- gradle使用阿里云镜像
- mybatisplus 表名添加前缀的实现方法
- springboot整合Mybatisplus
- MyBatisPlus 用起来真的很舒服
- map转换成字符串的方法
- 京东到家基于netty与websocket的实践
- 基于netty搭建websocket,实现消息的主动推送
- Google Guava 编程
- 用Gson实现json与对象、list集合之间的相互转化
- Redis 模糊查询删除操作
- springboot项目下WebSocket+RabbitMq的搭建
- 算法 —— 递推 ——五种典型的递推关系之Fabonacci数列
- 算法 —— 递推 ——五种典型的递推关系之Fabonacci数列
- 算法 —— 递推 ——五种典型的递推关系之Fabonacci数列
- 信息学奥赛一本通(C++)在线评测系统——基础(二)基础算法 —— 1313:【例3.5】位数问题
- 信息学奥赛一本通(C++)在线评测系统——基础(二)基础算法 —— 1313:【例3.5】位数问题
- 信息学奥赛一本通(C++)在线评测系统——基础(二)基础算法 —— 1313:【例3.5】位数问题
- 信息学奥赛一本通(C++)在线评测系统——基础(二)基础算法 —— 1312:【例3.4】昆虫繁殖
- 信息学奥赛一本通(C++)在线评测系统——基础(二)基础算法 —— 1312:【例3.4】昆虫繁殖
- 信息学奥赛一本通(C++)在线评测系统——基础(二)基础算法 —— 1312:【例3.4】昆虫繁殖
- 数数塔 NBUT 1083
- SSLZYC 2576 平台
- SSLZYC 2133 腾讯大战360
- SSLZYC 2575 给出字符串
- SSLZYC 2574 Closest
- SSLZYC 1127 方程的解数
- SSLZYC 1692 魔板
- SSLZYC 1125 集合