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

发布于 2022-09-05 02:06:44 字数 964 浏览 13 评论 0

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随便改，随便加，随便减”

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

血之狂魔 2022-09-12 02:06:44

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

在同一个堆叠上下文中的元素，z-index越高越靠近用户；
在不同堆叠上下文中的元素，如果堆叠上下文一距离用户更近，那么它的所有子元素都在另一个堆叠上下文子元素的前面，也就是离用户更近，不同堆叠上下文中的子元素不可能发生交叉；
所以，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的下边。

回复收藏 0

江城子 2022-09-12 02:06:44

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

z-index 只有在 position 为 absolute | fixed | relative | sticky 时才生效.
当父元素设置了 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 了

回复收藏 0

旧梦荧光笔 2022-09-12 02:06:44

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

回复收藏 0

我很OK 2022-09-12 02:06:44

不能。因为你的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>

效果：

回复收藏 0

请叫√我孤独 2022-09-12 02:06:44

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

回复收藏 0

感受沵的脚步 2022-09-12 02:06:44

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

回复收藏 0

紫﹏色ふ单纯 2022-09-12 02:06:44

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

回复收藏 0

梦一生花开无言 2022-09-12 02:06:44

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

仅供参考，欢迎交流

回复收藏 0

浪漫之都 2022-09-12 02:06:44

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

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

</div>

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

回复收藏 0

~没有更多了~

关于作者

铜锣湾横着走

暂无简介

文章

24 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

梦里南柯

不将就、

alipaysp_ZRaVhH1Dn

青衫儰鉨ミ守葔

故事未完

梦晓ヶ微光ヅ倾城

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

梦里南柯

不将就、

alipaysp_ZRaVhH1Dn

青衫儰鉨ミ守葔

故事未完

梦晓ヶ微光ヅ倾城

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。