overnothing / articles Goto Github PK

z-index失效原因

工作中遇到了一个问题，想通过设置z-index将元素渲染出来，遮盖后面的元素，却没有成功，谷歌了一圈发现有以下几种原因：

• 父级元素position属性为relative
• 目标元素的position属性为默认值static

层叠上下文（stacking context）

为什么position属性为默认值static的话z-index就失效了呢？查阅资料后得知，CSS中有层叠上下文（Stacking Context）这一概念。

层叠上下文这个概念不太好直接说到底是什么，它有些类似于块级格式上下文（BFC），只要元素满足了一定条件，这个元素就是层叠上下文。层叠上下文在浏览器决定各个元素在z轴上的顺序起作用。

那么满足哪些条件，一个元素就可以称作是层叠上下文呢？

• 根元素，也就是html元素默认就是层叠上下文
• position属性不是static而且z-index值不为auto的元素
• opacity属性值小于1的元素
• 一些新的CSS属性也会创建层叠上下文。这些属性包括transform、filter，等等，具体信息请查阅此链接。
• 还有一条基本准则，如果一个CSS属性要渲染一个用户看不到的上下文的元素时，它肯定要创建一个新的层叠上下文。

好了，我们现在知道什么是层叠上下文了，也知道如何创建层叠上下文了。那么如何决定层叠上下文和层叠上下文之间，以及层叠上下文和非层叠上下文之间在z轴上的渲染顺序呢？这就引出了下一个概念，层叠顺序（stacking order）。

层叠顺序（stacking order）

元素在z轴层叠顺序遵循下面的规则：

1. 根元素，即html元素
2. z-index值为负数的定位元素，z-index值大的在z-index值小的之前，相同z-index值根据在HTML中的出现顺序排列
3. 非定位元素，按照在HTML中出现的顺序排列
4. z-index值为auto的定位元素（以及它的子元素），按照在HTML中出现的顺序排列
5. z-index值为正的定位元素（以及它的子元素），z-index值大的在z-index值小的之前，相同z-index值根据在HTML中的出现顺序排列

元素根据上面的规则，从1到5离用户越来越近。

问题解决方式

说了这么多概念上的事，最后我是怎么解决这个z-index不生效的问题的呢？按照文章开头找到的方法修改了position属性的值并没有起作用。

其实问题是父级元素有overflow: hidden，把我想控制的子元素遮盖住了，把父级元素的overflow属性改为默认的visible就可以正常显示了。

参考资料

• 张鑫旭：深入理解CSS中的层叠上下文和层叠顺序
• stackoverflow: z-index not working with fixed positioning
• MDN: the stacking context