有没有办法使用 css 将子元素放在其父元素后面？ [复制]答案

【问题标题】：Is there a way to put a child element behind its parent using css? [duplicate]有没有办法使用 css 将子元素放在其父元素后面？ [复制]
【发布时间】：2013-06-18 13:28:35
【问题描述】：

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

原谅英语不好。

【问题讨论】：

虽然您确实描述了您的问题，但非常感谢能够看到一些代码。考虑添加一些代码，以便您的问题具有更高的价值
你只是想隐藏元素吗？
@Mimo，不，这里的问题是孩子溢出了父母，我需要把它藏在后面。就像塞尔吉奥的回答一样jsfiddle.net/L29d2

标签： javascript css

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

【讨论】：

谢谢@Sergio。这行得通:)

【解决方案2】：

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

position:relative;
z-index:-1;

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

【讨论】：

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

【讨论】：