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

Question

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

书本层、广告层和黑色层

它们的div结构是

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

（black 是绝对的，book 是相对的，adv 是绝对的）

问题是，如果我希望黑色层在 book 之上但在 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;
}

您的主要问题将是对齐元素，除非您将它们全部包装在带有 position:relative 的 div 中

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