为什么我写的z-index不生效？ _生活百科

前言【为什么我写的z-index不生效？】相信大家在工作中都遇到过这样一些奇怪的问题：
1.为什么我写的z-index没有生效？
2.为什么z-index大的元素却没有盖住z-index小的元素？
3.如何让父元素盖住子元素呢？
以上这些问题都跟CSS层叠上下文有关，带着上面这些问题我们一起来了解一下什么是CSS层叠上下文，以及这些奇怪现象背后的原理！
如果这篇文章有帮助到你，?关注+点赞?鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～
什么是CSS层叠上下文？

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

z轴在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴 。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

文章插图
我们可以这样来理解：

层叠上下文是HTML元素的三维概念，可以想象为一条垂直于视窗的z轴
当元素创建了重叠上下文时，这个元素就有了一个z轴
如果内部的子元素发生重叠，会依据自身属性优先级顺序占用z轴（重叠上下文）上的空间
优先级最大的元素排在最上面，离用户也最近

如何产生层叠上下文?了解了层叠上下文，我们还要知道层叠上下文是如何产生的。
一般来讲有3种方法：

html中的根元素<html></html>本身就是层叠上下文，成为根层叠上下文
position属性为非static值并设置z-index属性为具体数值
一些CSS3属性也能产生层叠上下文
- 一个 flex 元素(flex item)，且 z-index 值不为 “auto”，也就是父元素 display: flex|inline-flex
- 元素的 opacity 属性值小于 1
- 元素的 transform 属性值不为 “none”
- 元素的 mix-blend-mode 属性值不为 “normal”
- 元素的 isolation 属性被设置为 “isolate”
- 在 mobile WebKit 和 Chrome 22+ 内核的浏览器中，position: fixed 总是创建一个新的层叠上下文, 即使 z-index 的值是 “auto”
- 在 will-change 中指定了任意 CSS 属性，即便你没有定义该元素的这些属性
- 元素的 -webkit-overflow-scrolling 属性被设置 “touch”