As you can see at this snippet, I'd like to create a container div with some text, the blueBox that goes up and another div that covers the container but not the blueBox. Anybody knows why the blueBox is not visible on top of red div even though it has z-index 4 and the red div has z-index 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>You are closing the container div before entering the blue square div. You need two children divs inside the container for the z-index to work.
In this case, you would need something like this:
#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>Additionally to the first answer, If I understand correctly you want an hover effect on those divs, if so you could remove "onmouseleave" and "onmouseenter" parameters and edit your file to look cleaner like so:
#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>