Question

我的问题与主题一样，我在下面尝试过，但它不起作用。

我的HTML

<div id="parent">
    <div id="children"></div>
</div>

我的CSS

#parent {
    position:relative;
    z-index: 2;
    width: 200px;
    height: 200px;
    background: green;
}
#children {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
    background: blue;
}

Answer 1

省略父元素的z-index，然后给孩子一个负z-index值。

通过这样做，您基本上删除了之前在元素之间建立的stacking context。

Example Here

#parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: green;
}
#children {
    position: absolute;
    z-index: -1;
    width: 100px;
    height: 100px;
    background: blue;
}

Answer 2

您可以完全删除z-index并将overflow：hidden添加到父级，然后通过将top或margin-top属性修改为-100px来移动子项。

#parent {
    position:relative;
    width: 200px;
    height: 200px;
    background: green;
    overflow:auto;
}
#children {
    position: absolute;
    width: 100px;
    height: 100px;
    background: blue;
    top:-100px;
}

<div id="parent">
    <div id="children">child</div>
</div>

如何将子div放在父div之后？

2 个答案: