负z指数不工作::在伪元素后

Question

我不明白为什么pseudo元素:: after不会在蓝框后面，当我把z-index作为负值与其他div没有z-index值。就在蓝色框在黄色框后面的那一刻，但我希望黄色框在蓝色框下方，但在红色框上方。

.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如下部分：

.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

你需要给元素position。

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在红色框和黄色箱，并添加position:relative;他们

.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>