层叠顺序

文章目录

1. 为什么会有层叠顺序?
2. 一个元素内
3. 同层元素之间：层叠顺序
4. 非同层元素之间：层叠上下文
5. 区分层叠上下文与层叠顺序

为什么会有层叠顺序?

为了将重要内容元素展示在前面，浏览器内置了一套层叠优先级。【参考资料】

一个元素内

border/background一般用于装饰属性，而浮动和块状元素一般用于布局，内联元素则多是内容。三者对比，内容的层叠顺序通常最高；如下图，文字覆盖在背景图片上面。

同层元素之间：层叠顺序

一般情况下，同级元素谁的z-index大则谁的层级高
z-index没设置或相等的情况下，排后面的元素层叠顺序高一些
特别地，以下情况会自动创建层叠上下文，并获得相当于z-index:auto的层级
- opacity不是1
- transform不是none
- will-change
- position且z-index为数值
- 更多…
- 还有一些例外的情况，比如tbody,thead,tr的z-index只能为0或auto，并且position只能为static，意味着position:relative无效，不能生成层叠上下文，而opacity则有效；另外td,th不会有这种情况

非同层元素之间：层叠上下文

假如一个元素的所有祖先元素都没有创建层叠上下文，则其与祖先元素都在一个层叠上下文中，由此可以出现下图的非同级元素之间的覆盖。

<div>
  <img src="1.jpg" style="position:absolute; z-inde:2;" />
</div>
<div>
  <img src="2.jpg" style="position:relative; z-inde:1;" />
</div>

若父元素创建了层叠上下文就意味着子元素一定是基于父元素的层叠上下文来创建局部的层叠上下文的；当然了，脱离文档流的fixed除外。

z-index:auto的元素不会创建层叠上下文，相当于什么都没写；0的话会创建层叠上下文，此时无论子元素设置什么都无法逃脱／超越父元素的层级

<div style="position:relative; z-inde:0;">
  <img src="1.jpg" style="position:absolute; z-inde:2;" />
</div>
<div style="position:relative; z-inde:0;">
  <img src="2.jpg" style="position:relative; z-inde:1;" />
</div>

正常情况下z-index:-1的子元素可以藏在父元素后面，但一旦父元素创建了层叠上下文就不行了（疑问：从层叠顺序来看，z-index为负数也无法藏在background后面，为什么说“正常情况下，z-index:-1可以藏在background:blue后面”呢？因为这个background是父元素.box的，不是img的）

区分层叠上下文与层叠顺序

层叠上下文的每一层都是一个层叠顺序，跨层的元素不能够直接用z-index大小来比较，必须向上一直获取到同层级层叠顺序再进行比较。【参考资料】