如何将父div放在前面？答案

【问题标题】：How to bring parent div front?如何将父div放在前面？
【发布时间】：2014-07-07 18:42:16
【问题描述】：

如何把父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 小提琴： http://jsfiddle.net/gautm5154/xPvHf/

【问题讨论】：

相关：stackoverflow.com/questions/1806421/…
您为什么要这样做？在这种情况下，您只需交换父母和孩子，不是吗？
不可能，父元素总是在他的子元素之下。没有机会将父级的 z-index 设置为高于子级（ren）。
@panther 在下面查看我的答案。

标签： html css

【解决方案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 类实际上没有意义，我已在答案中更改为 ids。

【讨论】：

@GautamKumar 检查我的答案，这是可能的，但正如我所说，我也会这样做。

【解决方案2】：

sambomartin 的回答是我会怎么做，但我只会展示让父元素显示在子元素上方是可能的。

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

【讨论】：

检查这个小提琴link。为什么孩子出现在主下面？
@GautamKumar 怎么样？
为什么 child 出现在 main 下方？
@GautamKumar Fixed 就像我说过我不会那样做。我只是证明这是可能的。 IT 这样做是因为子级设置为 -1 z-index。所以它在后台。
主 div 的 zindex 应该比子 div 低吗？

【解决方案3】：

试试这个：

.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/

【讨论】：

所以让我在这里看看，你所做的就是复制我的答案。非常好！
哈哈，我发誓我没有交配，没有无限的方法。
您应该在发布之前检查其他答案。无需创建骗子。我不会因为它的好答案而投反对票，但下次请注意其他人的答案。
对不起，我正在输入我的，我没有看到其他人弹出：/

【解决方案4】：

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;
}

【讨论】：

这太可怕了。什么
@Ruddy 当您将背景颜色放入 css 中时，您的 div 会消失：P 使用此 css 结帐 .main { background-color: green;边框：1px纯黑色；高度：400px；宽度：400px； } .parent { 背景：无重复滚动 0 0 黄色；高度：100px；宽度：100px； z-index：1； } .child { background: none 重复滚动 0 0 red !important;高度：200px；位置：相对；宽度：200px； z 指数：-1； }
在这里扔代码不好。应该解释一下你在做什么。由于您的代码没有说清楚，因此您也没有演示。

【解决方案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;

}

.父{

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/

【讨论】：