如何将父级 div 置于最前面？

Question

如何将父级div置于最前面？

我的html代码如下：

<div class="main">
 <div class="parent">
    <div class="child"></div>
 </div>
</div>

我的css：

.main{
 width : 400px;
 height: 400px;
 background : green;
 z-index: 10; 
}
.parent{
 width: 100px;
 height: 100px;
 position: relative;
 background: yellow;
 z-index: 5;
} 
.child{
 width : 200px;
 height: 200px;
 background: red;
 z-index : -1;
}

我的js fiddle代码： http://jsfiddle.net/gautm5154/xPvHf/

这是一个链接，指向我的js fiddle代码示例。请点击链接查看。

- Gautam Kumar

---

相关：https://dev59.com/snI-5IYBdhLWcg3wiY3a - anroesti

你为什么想这样做呢？在这种情况下，你只需要交换父级和子级，不是吗？ - Ruddy

这是不可能的，父元素始终在其子元素下方。没有机会将父元素的 z-index 设置得比子元素高。 - pavel

@panther 请查看我下面的答案。 - Ruddy

Answer 1

parent元素永远不可能在其包含的元素前面。

你是想要这样做吗？

http://jsfiddle.net/Zc9Ch/

这个CSS会更像这样

.main{
        width : 400px;
        height: 400px;
        border :1px solid black;            
        position:relative;
    }
    #bottom{
        width: 100px;
        height: 100px;
        position: absolute;
        background: #e3e3e3;
        z-index: 1;
    }
    #top {
        width : 200px;
        height: 200px;
        background: red;
        z-index:2;
        position:absolute;
    }

HTML为了完整性

<div class="main">
    <div id="top"></div>
    <div id="bottom""></div>
</div>

显然，在你的例子中，parent和child这些CSS类并没有太多意义，我已经在答案中将它们改为了ID。

- sambomartin

---

@GautamKumar 请看一下我的答案，这是可能的，但正如我所说，这也是我会这样做的方式。 - Ruddy

Answer 2

CSS：

.main {
    width : 400px;
    height: 400px;
    border :1px solid black;
}
.parent {
    width: 100px;
    height: 100px;
    background: #e3e3e3;
    z-index: 1;
}
.child {
    width : 200px;
    height: 200px;
    background: red;
    z-index: -1;
    position: relative;
}

DEMO HERE

的翻译是：

{{链接1：这里演示}}

。

- Ruddy

---

请检查这个fiddle 链接。为什么子元素出现在主元素下面？ - Gautam Kumar

@GautamKumar 这个怎么样？ - Ruddy

为什么子元素出现在主元素下面？ - Gautam Kumar

@GautamKumar 已修复。就像我说的，我不会这样做。我只是证明它是可能的。它之所以这样做，是因为子元素被设置为-1的z-index。所以它在背景后面。 - Ruddy

主要的 div 应该比子 div 具有更低的 z-index 值才能显示出来？ - Gautam Kumar

@GautamKumar 我不会过分纠结这个问题，因为它并不是必要的。当你更好地掌握了 z-index 的工作原理后，再回到这个答案看看发生了什么。现在，还是坚持另一个答案，因为它只是一种更好的方法。 - Ruddy

Answer 3

HTML:

<div class="main">
    <div class="parent"></div>
    <div class="child"></div>
</div>

CSS：

.main {
    width : 400px;
    height: 400px;
    background : green;
    z-index: 10;
}
.parent {
    width: 100px;
    height: 100px;
    position: relative;
    background: yellow;
    z-index: 5;
}
.child {
    width : 200px;
    height: 200px;
    background: red;
    z-index : -1;
    margin: -100px 0 0;
}

- Vaibhav Singhal

---

这太糟糕了。什么？ - Ruddy

@Ruddy 当你在CSS中设置背景颜色时，你的div会消失 :P 请使用以下CSS进行检查： .main { background-color: green; border: 1px solid black; height: 400px; width: 400px; } .parent { background: none repeat scroll 0 0 yellow; height: 100px; width: 100px; z-index: 1; } .child { background: none repeat scroll 0 0 red !important; height: 200px; position: relative; width: 200px; z-index: -1; } - Vaibhav Singhal

在这里随意抛出代码并不好。应该解释一下你正在做什么。由于你的代码并不清晰，也没有演示。 - Ruddy

Answer 4

试试这个：

.main {
    width : 400px;
    height: 400px;
    border :1px solid black;
}
.parent {
    width: 100px;
    height: 100px;
    background: #e3e3e3;
    z-index: 1;
}
.child {
    width : 200px;
    height: 200px;
    background: red;
    z-index: -1;
    position: relative;
}

顺便提一下，为了使 z-index 生效（在这里是 .main），您需要将位置设置为 relative、fixed 或 absolute。

最后，这里有一个 jsfiddle 来展示它：http://jsfiddle.net/xPvHf/7/

- Valentin Mercier

---

所以让我看看，你做的是复制了我的答案。非常好！ - Ruddy

我发誓我没有，没有无限的方法可以做到这一点。 - Valentin Mercier

在发帖前，你应该检查其他答案。不要创造重复的内容。虽然这是一个好答案，我不会将其评为负分，但请下次注意其他人的回答。 - Ruddy

抱歉，我正在输入我的内容，没有看到其他人的出现:/ - Valentin Mercier

Answer 5

我已经添加了不透明度来实现连续性

.main {

width : 400px;
height: 400px;
border :1px solid black;
background-color:#000000;
opacity:.19;
filter: alpha(opacity=19);
-moz-opacity:.19;
z-index:1;

}

.parent {

width: 100px;
height: 100px;
background: #000000;
z-index: -1;

}

.child {

width : 200px;
height: 200px;
background: red;
z-index: -1;
position: relative;

}

http://jsfiddle.net/shivassmca/vpHB9/

- Siva.Net