有一个元素有 3 层。例如:
书本层、广告层和黑色层
它们的div结构是
<div id="black"></div>
<div id="book">
<div id="adv"></div>
</div>
(black 是绝对的,book 是相对的,adv 是绝对的)
问题是,如果我希望黑色层在 book 之上但在 adv 之下,我怎样才能在不改变结构的情况下实现这一点?
在JSFiddle上看到它!
<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;
}
您的主要问题将是对齐元素,除非您将它们全部包装在带有 position:relative 的 div 中
我已经测试过了,我认为这个 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;
}