負のzインデックスが機能していない:: after擬似要素

Question

他のdivに負の値としてZ-インデックスを付けると、擬似要素::後が青色のボックスの後ろにならない理由はありませんz-インデックス値。現時点では、青色のボックスは黄色のボックスの後ろにありますが、黄色いボックスは青いボックスの下にありますが、赤色のボックスの上になります。

.menu1{ 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
} 
 
.menu1 .menupicture1{ 
 
    width: 50px; 
 
    height: 50px; 
 
    position: relative; 
 
    top: 90px; 
 
    background-color: blue; 
 
} 
 

 
.menu1 .menupicture1::after{ 
 
    content: ""; 
 
    display: block; 
 
    height: 75px; 
 
    width: 75px; 
 
    background-color: yellow; 
 
    z-index: -1; 
 
}

<div class="menu1"> 
 
     <div class="menupicture1"></div> 
 
</div>

Answer 1

あなたは疑似要素でposition:absoluteが欠落しています。以下

更新CSSの一部：あなたは要素positionを与える必要が

.menu1 .menupicture1::after{ 
    content: ""; 
    display: block; 
    height: 75px; 
    width: 75px; 
    background-color: yellow; 
    z-index: -1; 
    position:absolute; /* add this property */ 
} 

.menu1{ 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
} 
 
.menu1 .menupicture1{ 
 
    width: 50px; 
 
    height: 50px; 
 
    position: relative; 
 
    top: 90px; 
 
    background-color: blue; 
 
} 
 

 
.menu1 .menupicture1::after{ 
 
    content: ""; 
 
    display: block; 
 
    height: 75px; 
 
    width: 75px; 
 
    background-color: yellow; 
 
    z-index: -1; 
 
    position:absolute; 
 
}

<div class="menu1"> 
 
     <div class="menupicture1"></div> 
 
</div>

Answer 2

。

more info

.menu1 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 

 
.menu1 .menupicture1 { 
 
    width: 50px; 
 
    height: 50px; 
 
    position: relative; 
 
    top: 90px; 
 
    background-color: blue; 
 
} 
 

 
.menu1 .menupicture1::after { 
 
    content: ""; 
 
    display: block; 
 
    height: 75px; 
 
    width: 75px; 
 
    background-color: yellow; 
 
    z-index: -1; 
 
    position: relative; 
 
}

<div class="menu1"> 
 
    <div class="menupicture1"></div> 
 
</div>

Answer 3

赤ボックスと黄色ボックスにz-index負の使用、および

.menu1{ 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
    position:relative; 
 
    z-index: -1; 
 
    
 
} 
 
.menu1 .menupicture1{ 
 
    width: 50px; 
 
    height: 50px; 
 
    position: relative; 
 
    top: 90px; 
 
    background-color: blue; 
 

 
} 
 

 
.menu1 .menupicture1::after{ 
 
    content: ""; 
 
    display: block; 
 
    height: 75px; 
 
    width: 75px; 
 
    background-color: yellow; 
 
    position:relative; 
 
    z-index: -1; 
 

 
}

<div class="menu1"> 
 
     <div class="menupicture1"></div> 
 
</div>

彼らに position:relative;を追加