1.static 静态定位
元素默认的定位方式 不能设置边偏移 不可以设置层级(z-index) 不脱标
2.relative 相对定位
相对定位的元素参考自身之前在标准流中的位置进行定位 可以设置边偏移 可以设置层级 不脱离标准流(在标准流中保留位置)
3.absolute 绝对定位
绝对定位的元素参考 距离最近带有定位(相对定位 、绝对定位、固定定位)的父元素(祖级元素)进行对齐,如果没有定位的父元素则参考浏览器进行对齐
可以设置边偏移 ,可以设置层级, 完全脱离标准流(在标准流中不保留位置)
绝对定位的元素会转换元素的显示模式变成 近似行内块的显示方式
绝对定位的元素不存在外边距塌陷
4. fixed 固定定位
固定定位的元素只参考浏览器可视区进行对齐
可以设置边偏移,可以设置层级
完全脱离标准流 ( 在标准流中不保留位置 )
固定定位的元素显示模式会发生变化 变成 近似行内块的显示方式
固定定位的元素不会跟随浏览器滚动条滚动
固定定位的元素不存在外边距塌陷
子绝父相:
子元素设置绝对定位 父元素设置 相对定位
绝对定位的盒子 居中对齐:
1.先设置 绝对定位的子元素边偏移为 50%
2. 设置绝对定位的子元素 margin 负值
定位元素的层级属性 z-index
定位(静态定位除外)的元素层级都会高于 标准流 和 浮动
只有设置了定位(静态定位除外)的元素才有z-index
元素默认的层级为 0 默认显示 后来者居上(按照元素的书写顺序进行显示,后写的元素在最高层级显示)
如果设置了层级属性则 按照 层级属性大小显示 层级越大 显示越靠前
|
|