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和child css类并没有真正意义，我已经在答案中更改为ID。

Answer 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

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

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/

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/

如何将父母div带到前面？

5 个答案: