html - 在堆叠上下文中插入一个元素及其 DOM 子元素和它的 DOM 孙子元素

Question

如何在它的子元素和它的孙元素之间插入一个元素？我有这样的标记:

<div id="main">
    <div id="img-container">
        <img id="img">
    </div>
</div>

样式是:

#main {
    margin-top: 300px;
    position: relative;
    z-index: 1;
}
#img-container {
    margin-top: -150px;
    position: relative;
    z-index: 0;
}
#img {
    display: block;
    position: relative;
    z-index: 2;
}

现在顺序必须是

1. img 容器
2. 主要
3. 图片

现在如何运作:

它的预期工作方式:

(感谢@ralph.m 提供图片)

Answer 1

您实际上可以获得那种视觉效果，而无需重新排序层等。您可以反转这些元素的样式以获得那种外观。或者你可以像这样做一些更简单的事情:

#main {
    position: relative;
    background: #e7e7e7;
    width: 600px;
    padding: 0 50px;
    margin: 50px;
}

#main::after {
    content: '';
    width: 500px;
    height: 200px;
    position: absolute;
    z-index: -1;
    left:50%;
    margin-left: -250px;
    top: -50px;
    background: #30353b;
}

#img-container {
    position: relative;
    width: 400px;
    top: -20px;
    margin: 0 auto;
}

    <div id="main">
        <div id="img-container">
            <img src="https://unsplash.it/400/200">
        </div>
    </div>