How to ordering the z-index in this case - html

Question

There is an element that has 3 layer . For example:
book layer , adv layer and black layer
The div structure of them are
<div id="black"></div>
<div id="book">
<div id="adv"></div>
</div>
(black is absolute, book is relative, adv is absolute)
The problem is , if I would like the black layer is above book but under adv , how can I achieve this without changing the structure?

Answer 1

Got it:
See it on 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;
}
The Z-index highlights
#book{
z-index: -1;
}
#black{
z-index: 1;
}
#adv{
z-index: 2;
}
Your main problem will be aligning the elements unless you wrap them all in a div with position:relative

Answer 2

I have test it,i think this css help you to create that structure of layer as you want.
Background color is used for differentiate layers.
#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;
}