html - この場合の z-index の順序付け方法

Question

3つの層を持つ要素があります。例えば：

ブックレイヤー、advレイヤー、ブラックレイヤー

それらの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 でラップしない限り、主な問題は要素を整列させることです