Question

我想知道是否有办法使用css将子元素放在其父元素后面。我现在z-index不是一个选项，因为子元素继承了父元素的z-index。但我想知道是否有一个黑客或任何我可以用来完成这件事。或者，如果有一个javascript hack或任何东西。

原谅糟糕的英语。

Answer 1

如果父母没有z-index且孩子有负z-index，那就有效。点击这里：

html

<div class="big">
    <div class="small"></div>
</div>

CSS

.big {
background-color:red;
width:400px;
height:400px;
}
.small {
float:left;
position:absolute;
background-color:blue;
width:200px;
height:200px;
margin-left:300px;
z-index:-1;
}

Answer 2

将以下样式应用于子元素：

position:relative;
z-index:-1;

您可以调整z-index值，但它应该是负数。可能它会解决你的问题。有关详细信息，请查看此页面http://www.tutorialrepublic.com/css-tutorial/css-position.php

Answer 3

塞尔吉奥是完全正确的，如果父母继承了索引，孩子可以是负面的并隐藏。至少在我的测试中是这样。另请注意，您必须为孩子使用相对/绝对/固定定位。

http://jsfiddle.net/6xT45/

#parent
{
    position: absolute;
    width: 100px;
    height: 100px;
    background: blue;
}

#child
{
    position: absolute;
    z-index: -1;
    width: 50px;
    height: 50px;
    top: 25px;
    left: 25px;
    background: red;
}

有没有办法使用css将子元素放在其父元素后面？

3 个答案: