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

Question

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

原谅英语不好。

Answer 1

如果父母没有z-index，孩子有负面z-index，它会起作用。在这里检查：

jsfiddle.net/L29d2/

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

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

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