问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

子元素的z-index如何高于父元素的兄弟元素的z-index值？

头像
bravility
    24953550

    1.文字描述如下：

    有A、B两个同级div，A的z-index为888，B的z-index为999，A下有H，z-index为1000,但是发现H并没有在B的上层，不改变层次结构能否使H在B的上层？

    2.代码描述如下

    <div class='A' style="background-color:rgba(0, 0, 0, 0.9);position: absolute;z-index: 888;">
    <h1 class='H' style="position: absolute;color: #fff;z-index: 1000;display: block;">
        This is a heading
    </h1>
</div>

<div class='B' style="position: absolute;height: 100%;width: 100%;background: #000;z-index: 999;"></div>

    3.可以改变任意样式，但是不能改变（A>H,B）的层次结构以及他们的z-index，如何使得H在B之上?

    4，划重点！！！！

    仅不能改变（A>H,B）的层次结构以及他们的z-index，其他style随便，包括但不限于position、width，height随便改，随便加，随便减”
    仅不能改变（A>H,B）的层次结构以及他们的z-index，其他style随便，包括但不限于position、width，height随便改，随便加，随便减”
    仅不能改变（A>H,B）的层次结构以及他们的z-index，其他style随便，包括但不限于position、width，height随便改，随便加，随便减”

    css3cssz-index
    阅读 35.2k
    9 个回答
    得票最新
    头像
    luckness
      6.2k2216

      clipboard.png

      根据规范，z-index是应用到定位元素的，也就是position属性不为static的元素（感谢@a_dust和@ymwangel），否则，设置z-index是没有意义的；
      z-index的作用有两点，一是设置在当前堆叠上下文(stacking context)中的层级；二是创建一个新的堆叠上下文；
      z-index并不是设置的值越高，就会越靠近用户，还和堆叠上下文有关系；

      1. 在同一个堆叠上下文中的元素，z-index越高越靠近用户；
      2. 在不同堆叠上下文中的元素，如果堆叠上下文一距离用户更近，那么它的所有子元素都在另一个堆叠上下文子元素的前面，也就是离用户更近，不同堆叠上下文中的子元素不可能发生交叉；
      3. 所以，z-index其实不是一个绝对值，而是一个相对值；

      举例如下：

          <body>
        <div class="div1">
            <div class="div1div1">
                <div class="div1div1div1"></div>
            </div>
        </div>
        <div class="div2">
            <div class="div2div1"></div>
        </div>
    </body>
      body {
    margin: 0;
}

.div1 {
    width: 700px;
    height: 700px;
    background: red;
}

.div1div1 {
    width: 300px;
    height: 300px;
    background: green;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 500;
}

.div1div1div1 {
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    z-index: 10;
}

.div2 {
    width: 600px;
    height: 600px;
    background: pink;
    position: absolute;
    z-index: 400;
    top: 0;
}

.div2div1 {
    width: 500px;
    height: 500px;
    background: blueviolet;
    position: absolute;
    z-index: 800;
}

      图片描述

      对于.div1div1div1和.div2div1，虽然后者的z-index(800)高于前者(10)，但是因为前者所在的堆叠上下文(.div1div1)的z-index(500)高于后者所在的堆叠上下文(.div2div1)的z-index(400)，所以前者是在后者上面的。

      评论里面你设置div{z-index:9;position:relative;}会建立一个新的堆叠上下文，和div同级的元素是0，img元素是9 -1，因为9>0，所以img是在上面的。

      按照你的题目，其实position属性是不能改的，如果把position属性改为relative，那你的z-index属性其实就不起作用了，在z-index都起作用的情况下，是没有办法达到你的要求的，理由如下：

      A 888
H 888 1000
B 999

      A, B和H的层级如上，因为888 < 999，所以A和H都在B的下边。

      头像
      LZQ_
        183

        其实看下 z-index 的规则就清楚了

        1. z-index 只有在 position 为 absolute | fixed | relative | sticky 时才生效.
        2. 当父元素设置了 z-index 后，其子元素所设置的 z-index 都将在父元素内进行排列，这种情况下的子元素不会与父元素外部其他元素出现渲染层次交叉的情况。

        也就是，假设有以下文档：

        <div class="a" style="z-index: 2"></div>
<div class="b" style="z-index: 1">
  <div class="c" style="z-index: 999"></div>
</div>
<style>
.a,
.b,
.c {
  position: absolute;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
.a {
  height: 50px;
  width: 50px;
  background-color: #f00;
}
.b {
  height: 100px;
  width: 100px;
  background-color: #0f0;
}
.c {
  height: 75px;
  width: 75px;
  background-color: #00f;
}
</style>

        显示效果如下图：

        红色为a，绿色为b，蓝色为c

        注：红色为a，绿色为b，蓝色为c

        由此可见无论元素 c 的 z-index 设的多高，都将显示在元素 a 的下面。

        所以要解决题主所说的 A>H,B 问题
        有一个最好的办法，那就是去掉 A 的 z-index，这样 H 的 z-index 就不会受限于 A 的 z-index 了

        头像
        答案在风中飘着
          302616

          不能父级限制了子元素的 位置

          头像
          boxsnake
            6.8k21249

            不能。因为你的H和B都是position: absolute，可以认为，绝对定位的元素在z轴上的偏移量远远大于z-index可以设置的量（可以认为绝对定位元素有着无穷大的z偏移）。因此，H和B两个元素的z-index实际上并不起到任何作用。

            去掉了position: absolute之后，代码如下

            <div class='A' style="background-color:blue;height:100px;margin-bottom: -200px;padding: 30px;display:block;z-index: 888;">
    <h1 class='H' style="color: #fff;z-index: 1000;margin-top: 60px;display: block;">
        This is a heading
    </h1>
</div>

<div class='B' style="height: 100%;width: 100%;background: #000;z-index: 999;"></div>

            效果：

            clipboard.png

            头像
            守候
              18.6k3936

              首先A,B,H都是绝对定位，然后z-index,B>A了，自然而然，B就挡住了A，H在A里面，又是绝对定位于A，自然也就挡住H了，解决方法就是设置z-index,A>B就行了。这样布局，H的z-index，没有实在的意义(只要遮住了A，也就遮住了H)！除非H不在A里面！

              头像
              发条橙子
                3991617

                可以想象成每一个元素的z-index都声明了一个平面世界，平面世界的高度就是z-index的值。 而子元素的z-index都是在这个世界相比较。

                头像
                游泳的鱼
                  981116

                  如果外面的z-index前者小于后者，没有办法让前者的子节点超过后者，只能改变层级，不过这样子的话，前者就可能把后者全都档住了，所以楼主还是把H从A中拿出来对应的层级设置好就能达到效果了

                  头像
                  ymwangel
                    442
                    1. 我也遇到过同样的问题，只不过我要的是在特定的情况下H会显示出来，而且A和B除了H之外，完全没有交错的地方。我的解决方法是：在特定的条件的时候，设置A的z-index > B的z-index。
                    2. 代码不完全，A和B都没有宽度和高度，不知道想要什么样的结果？是想要，既要显示H，又要显示B的内容么？如果是的话，可以让B中覆盖H的那部分的背景颜色透明，这样H就可以显示了。
如果不是这种效果，就没办法了。只要A的z-index < B的z-index，H就无法覆盖。

                    仅供参考，欢迎交流

                    头像
                    yj25626
                      347
                      新手上路，请多包涵

                      2222.png
                      那我们不用z-index实现B>A不可以吗，定位的基础知识，当使用定位时，后写的盒子会覆盖前面的盒子，说白了就是同一层级先写A盒子再写B盒子，这时候B就是在A上面的，然后H给z-index就可以生效了，因为它是唯一一个

                      <div class='A' style="background-color:rgba(0, 0, 0, 0.9);position: absolute">

                      <h1 class='H' style="position: absolute;color: #fff;z-index: 1000;display: block;">
    This is a heading
</h1>

                      </div>

                      <div class='B' style="position: absolute;height: 100%;width: 100%;background: #000"></div>

                      楼主的代码就把A、B的z-index删掉就实现了你的要求了啊

                      撰写回答
                      你尚未登录，登录后可以
                      • 和开发者交流问题的细节
                      • 关注并接收问题和回答的更新提醒
                      • 参与内容的编辑和改进，让解决方法与时俱进
                      推荐问题
                      宣传栏