黑马程序员技术交流社区

标题: 技术贴 [打印本页]

作者: 夏沫遇见 时间: 2019-3-19 12:48
标题: 技术贴
1.static 静态定位
元素默认的定位方式不能设置边偏移不可以设置层级（z-index）  不脱标

2.relative 相对定位

相对定位的元素参考自身之前在标准流中的位置进行定位可以设置边偏移可以设置层级  不脱离标准流（在标准流中保留位置）

3.absolute 绝对定位

绝对定位的元素参考距离最近带有定位（相对定位、绝对定位、固定定位）的父元素（祖级元素）进行对齐，如果没有定位的父元素则参考浏览器进行对齐

可以设置边偏移，可以设置层级，完全脱离标准流（在标准流中不保留位置）

绝对定位的元素会转换元素的显示模式变成近似行内块的显示方式

绝对定位的元素不存在外边距塌陷

4. fixed 固定定位

固定定位的元素只参考浏览器可视区进行对齐

可以设置边偏移，可以设置层级

完全脱离标准流（在标准流中不保留位置）

固定定位的元素显示模式会发生变化变成近似行内块的显示方式

固定定位的元素不会跟随浏览器滚动条滚动

固定定位的元素不存在外边距塌陷

子绝父相：

子元素设置绝对定位父元素设置相对定位

绝对定位的盒子居中对齐：
1.先设置绝对定位的子元素边偏移为 50%
2. 设置绝对定位的子元素 margin 负值

定位元素的层级属性 z-index

定位（静态定位除外）的元素层级都会高于标准流和浮动

只有设置了定位（静态定位除外）的元素才有z-index

元素默认的层级为 0 默认显示后来者居上（按照元素的书写顺序进行显示，后写的元素在最高层级显示）

如果设置了层级属性则按照层级属性大小显示层级越大显示越靠前

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2