0

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

书本层、广告层和黑色层

它们的div结构是

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

(black 是绝对的,book 是相对的,adv 是绝对的)

问题是,如果我希望黑色层在 book 之上但在 adv 之下,我怎样才能在不改变结构的情况下实现这一点?

4

2 回答 2

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 中

于 2013-10-15T12:10:25.327 回答
0

我已经测试过了,我认为这个 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;
}
于 2013-10-15T08:31:47.340 回答