z-index

Posted 2020-10-05

1.概念

　　将网页看成一个三维空间，z-index相当于设置元素在z 轴上的坐标。因此有了3个概念：层叠上下文，层叠层，层叠次序；

       层叠次序如下：

      1>背景和边框：形成层叠上下文的元素的背景和边框，层叠上下文中最低等级。

　　2>负z-index值：层叠上下文内设置了负z-index的子元素。

　　3>块级元素：文档流中非行内非定位元素。

　　4>浮动元素：非定位浮动元素（浮动元素相当于设置了方位的inline-block元素，层叠次序等同于行内元素）

　　5>行内盒：文档流中行内级别非定位元素。

　　6>z-index:0的定位元素：这些元素形成了新的层叠上下文。

　　7>z-index:整数 的定位元素：层叠上下文中最高等级。

　　定位元素为：position:absolute | fixed;

2.浮动元素

　　浮动元素和定位元素都会脱离正常的文档流，即不在占据正常文档流中的位置。浮动元素形成文字环绕效果可以理解为浮动元素与形内盒在同z-index显示层。造成父元素高度坍塌可以理解为浮动元素不占据正常文档流中的位置。其次浮动元素和定位元素没有默认宽度。通过在父元素上使用clearfix清除浮动，可以强制浏览器计算父元素的高度为浮动元素的高度。

 

参考：https://webdesign.tutsplus.com/zh-hans/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892