Z-index not working properly with overlapping divs

Issue

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>

Solution

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>

Answered By – Diogo Sousa

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.