在这种情况下如何订购z-index

Question

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

书籍图层，优先图层和黑色图层

它们的div结构是

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

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

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

Answer 1

知道了：

在JSFiddle上看到它！

HTML

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

CSS

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

Z-index亮点

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

你的主要问题是对齐元素，除非你将它们全部包含在一个div中，位置为：relative

Answer 2

我测试了它，我认为这个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;
}