URCloud

/ 换个头像心好累 / 0评 / 1/ 最后更新:2022-02-08
z-index不生效?

需求场景

考虑以下场景,A元素包含B,C元素,B元素包含B1元素,C元素包含C1元素。为什么C1元素的z-index明明很高,却始终在B1元素下面?

  <div id="A" style="position: relative;">
        <div id="B">
            <div id="B1" style="position: absolute;z-index:1000;">B1</div>
        </div>
        <div id="C" style="position: relative;z-index: 0;">
            <div id="C1" style="position: absolute;z-index:9000;">C1</div>
        </div>
    </div>

然后我把代码稍作改动,为什么C1又在B1上面了呢?

   <div id="A" style="position: relative;">
        <div id="B">
            <div id="B1" style="position: absolute;z-index:1000;">B1</div>
        </div>
        <div id="C" style="position: relative;z-index:auto;">
            <div id="C1" style="position: absolute;z-index:9000;">C1</div>
        </div>
   </div>

解决方案

z-index的使用涉及到一个层叠上下文的概念。首先只有position元素的值为非static时,z-index才会生效,才是有意义的。每一个值为非static的position元素都会创建一个层叠上下文环境。在我们的示例中就是A层叠环境里包含B1层叠环境和C层叠环境,C层叠环境包含C1层叠环境。这里就可以发现A到C1有2层而A到B1只有1层,所以C1的z-index无论多大都不会盖住B1。

那么问题来了,为什么第二种情况把z-index=0改成auto就变了呢?因为auto不会创建层叠上下文环境!!!是个特殊值

进阶思考

其实能创建层叠上下文的不止z-index,还有transform等

详细参考:https://zhuanlan.zhihu.com/p/340371083

1

Leave a Reply

Your email address will not be published.