Z-index not working properly with overlapping divs

Question

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>

`#container` creates a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) because of `position` and `z-index`. This means that its children can be stacked (`z-index` on `#moving1`) but will all be "flattened" on the parent's `z-index` (`z-index:1` on `#container` in this case) before all layers are composited. — Sheraff, Feb 22 '22 at 17:47

score 2 · Accepted Answer · answered Feb 22 '22 at 17:47

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>

Thanks Diogo, as I said to Mark, this is working but the problem is that on the real website I'm using it the bootstrap d-lg-flex is making the red box and the text at yellow box be shown side to side. The red box is not covering the text of the yellow box. Any option to sort it out? thank you! — Miguel Gisbert, Feb 23 '22 at 11:38
Well that means you are using Flexbox, which is not really suited for stacking elements on top of each other. Try using the CSS property `position: absolute` on some of the elements to see if it works correctly. — Diogo Sousa, Feb 23 '22 at 12:04
Thanks! I was using position:absolute but didn't work. With !important is working now :) — Miguel Gisbert, Feb 23 '22 at 14:26

score 1 · Answer 2 · answered Feb 22 '22 at 18:15

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>

Thanks, I'm using onmouseenter and onmouseleave because in the real website I need to add some classes to change a SVG color and move other boxes as well on the same event. This is working but the problem I found at the real website is that, as I'm using bootstrap, I use d-lg-flex and it shows the red box at one side and the text of yellow box next to it, I mean the red box does not cover the text of yellow box. — Miguel Gisbert, Feb 23 '22 at 09:30

Z-index not working properly with overlapping divs

2 Answers2