Html 在这种情况下，如何对z索引进行排序

有一个元素有3层。例如：

书籍层、广告层和黑色层

它们的div结构是

<div id="black"></div>
<div id="book">
    <div id="adv"></div>
</div>

（黑色是绝对的，书本是相对的，adv是绝对的）

---

问题是，如果我希望黑色层在书本上方，但在adv下方，我如何在不改变结构的情况下实现这一点？

我已经对其进行了测试，我认为此css可以帮助您创建所需的层结构

背景色用于区分层

#black{width: 100px;
height: 100px;
background: red;
position: absolute;
top: 187px;}
#book
{
width: 585px;
height: 230px;
background: pink;
padding: 92px;
}

#adv{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 187px;
}

知道了： 看吧

HTML Z指数突出显示

---

您的主要问题是对齐元素，除非您将它们全部包装在一个带有position:relative的div中。您必须更改HTML结构才能实现这一点。您介意提供一些示例吗？谢谢你的帮助。但是这个样式表似乎不能达到adv overlay，layer overlap book的效果。如果你在静态内容中使用这种分割结构，那么它看起来很不错。如果你在使用任何进一步的效果，那么你应该认为最适合你的设计的结构。确切地说，我需要知道你想要给你的网页什么样的外观。

<div id="black"></div>
<div id="book">
    <div id="adv"></div>
</div>

#black{
    width: 60%;
    height: 60%;
    background: black;
    position: absolute;
    top: 20%;
    left:20%
    z-index:1;
}
#book {
    width: 100%;
    height: 400px;
    background: pink;
    z-index:-1;
}

#adv{
    width: 20%;
    height: 20%;
    background: red;
    position: absolute;
    top: 40%;
    left:40%;
    z-index:2;
}

#book{ 
z-index: -1;
}
#black{ 
z-index: 1;
}
#adv{ 
z-index: 2;
}