不同的z-索引值 [英] Different z-index values

问题描述

我不知道如何正确解决问题，所以标题并没有提到任何东西，但无论如何，我的问题在于这段代码：

I didn't know how to properly address the problem I have so title is not telling pretty much anything, but anyways the problem I have is in this piece of code:

https://jsfiddle.net/bnh3487n/

div {
width: 100%;
}

#wrapper {
    width: 500px;
    height: 500px;
    position: relative;
}

#one {
    height: 200px;
    background-color: red;
    position: absolute;
    z-index: -1;
}

#sub {
    height: 50px;
    background-color: green;
    position: absolute;
    z-index: 3;
}

#two {
    height: 200px;
    width: 300px;
    background-color: blue;
    margin: 0px auto;
}

所以有可能让绿色的div位于蓝色的前面并保持红色div的子元素。我知道这个Z-index：3不起作用，但是没有任何想法如何进行分解工作;

So is it possible so that the green div is in front of the blue one and so that it stays child element of the red div. I know that this z-index: 3 isn't working but don't have any ideas how to soulution would work;

推荐答案

不，因为 z-index 只适用于两个元素是兄弟姐妹，而不是父母和子女。

No, because z-index only works if the 2 elements are siblings, not parents and children.

基本上 #two 在整个 #one 容器之前排队：

Basically #two is queued before the whole #one container:

 0   #two

-1   #one

和 #one 包含不在＃之外的 #sub 一个和 #one 仍然位于 #two 之后，所以 #sub 也在 #two 之后。

and #one contains a #sub that is not outside of #one and #one is still behind #two, so #sub is too, behind #two.

想想 z-index 像这样：

              -1                              0

     /--------------------/         /--------------------/
    /                    /|        /                    /|
   /      #one          / |       /      #two          / |
  /                    /  |      /                    /  |
 /-2  -1  0  1  2  3--/   |     /-2  -1  0  1  2  3--/   |      Observer (o ͜L o )
 |                    |   |     |                    |   |
 |               #sub |   |     |                    |   |
 |                    |   /     |                    |   /
 |                    |  /      |                    |  /
 |                    | /       |                    | /
 |--------------------|/        |--------------------|/

这篇关于不同的z-索引值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！