相对、绝对、固定定位,以及其层级关系和脱离文档流的影响

定位:一般父级用相对定位,子级用绝对定位

1.相对定位:position:relative
2.绝对定位:position:absolute
3.固定定位:position:fixed
默认static没有定位
偏移量:left和
top比
right和
bottom的优先级要高
相对定位
相对于自身原始位置进行定位
原点在自身左上角
不脱离文档流
特性:
1.不影响元素本身的特性
2.不使元素脱离文档流
3.提升层级
4.无法触发BFC
5.针对自己本身进行定位
绝对定位
以定位父级为原点进行定位
会脱离文档流
如果没有定位父级以document文档定位
温馨提示:绝对定位即使没有初始值,也一定要设置值
left:0px;top:0px;
特性:
1.会使元素完全脱离文档
2.内容撑开宽度和高度
3.使元素支持所有的CSS样式
4.提升层级
5. 绝对定位要和相对定位配合使用
6.如果有定位父级,针对定位父级发生偏移
如果没有,针对document进行偏移
7.如果绝对定位的子级有浮动,可以省略清浮动的操作
固定定位
以窗口左上角为原点定位,定位之后相对于窗口的位置始终不变
应用场景:悬浮在网页两边的广告
脱离文档流
温馨提示:IE6不支持固定定位
特性:
1.不兼容IE6
2.针对窗口进行定位
3.如果固定定位的子级有浮动,可以省略清浮动的操作

脱离文档流的两点影响
1.后面同父级元素会顶上来
2.父级会检测不到脱离文档流的元素,从而导致父级高度无法由内容撑开


定位层级设置
z-index:数值
数值越大,层级越高
层级关系
z-index负数<正常<float(和文档同级)<position<z-index正数
注意:z-index、left、top、right、bottom只对带有position属性(static除外)的元素有效
z-index,用来提升或降低层级关系





猜你喜欢

转载自blog.csdn.net/zlzbt/article/details/80089202