Z索引与重叠的div不能正常工作

Question

正如您在这个片段中看到的，我想创建一个包含一些文本的容器div，向上的blueBox和另一个覆盖容器但不覆盖blueBox的div。有人知道为什么blueBox在红色div的顶部不可见，尽管它有z索引4，而红色div有z索引3？

#container{
height:100px;
width:100px;
z-index:1;
position:absolute;
border:1px;
background-color:yellow;
}
#moving1{
height:30px;
width:30px;
background-color:blue;
position:absolute; 
left:20%;
top:50%;
z-index:4!important;
transition: 1s ease;
}
#moving2{
z-index: 3;
height:100px;
width:100px;
position:absolute;
top:0%;
left:0%;
background-color:red;
transition: all 1s ease;
}
.moveLeft{
transform: translateX(-110%);
}
.moveUp{
transform: translateY(-200%);
}

<div id="container" onmouseleave="document.getElementById('moving2').classList.remove('moveLeft'); document.getElementById('moving1').classList.remove('moveUp');">
container
<div id="moving1"></div>
</div>
<div id="moving2" 
onmouseenter="this.classList.add('moveLeft');                   document.getElementById('moving1').classList.add('moveUp');"></div>

Answer 1

在输入蓝色正方形div之前，您将关闭容器div。容器中需要两个子div，z索引才能工作。

在这种情况下，您需要这样的东西：

#container{
height:100px;
width:100px;
z-index:1;
position:absolute;
border:1px;
background-color:yellow;
}
#moving1{
height:30px;
width:30px;
background-color:blue;
position:absolute; 
left:20%;
top:50%;
z-index:4!important;
transition: 1s ease;
}
#moving2{
z-index: 3;
height:100px;
width:100px;
position:absolute;
top:0%;
left:0%;
background-color:red;
transition: all 1s ease;
}
.moveLeft{
transform: translateX(-110%);
}
.moveUp{
transform: translateY(-200%);
}

<div id="container" onmouseleave="document.getElementById('moving2').classList.remove('moveLeft'); document.getElementById('moving1').classList.remove('moveUp');">
container
<div id="moving1"></div>
<div id="moving2" onmouseenter="this.classList.add('moveLeft'); document.getElementById('moving1').classList.add('moveUp');"></div>
</div>

Answer 2

除了第一个答案，如果我理解正确，你希望在这些div上有悬停效果，如果是这样的话；onmouseleave"；以及"；onmouseenter"；参数，并编辑您的文件以使其看起来更干净：

#container{
height:100px;
width:100px;
z-index:1;
position:absolute;
border:1px;
background-color:yellow;
}
#moving1{
height:30px;
width:30px;
background-color:blue;
position:absolute; 
left:20%;
top:50%;
z-index:4!important;
transition: 1s ease;
}
#moving2{
z-index: 3;
height:100px;
width:100px;
position:absolute;
top:0%;
left:0%;
background-color:red;
transition: 1s ease;
}
#container:hover #moving1{
transform: translateY(-200%);
}
#container:hover #moving2{
transform: translateX(-110%); 
}

<div id="container" >
container
<div id="moving1"></div>
<div id="moving2"></div>
</div>