如何将父母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;
}

我的小提琴:http: //jsfiddle.net/gautm5154/xPvHf/

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, childcss类并没有真正意义,我在答案中改为id.