An absolute div is hidden by a fixed div

December 26, 2022

I will show you a simple example related to my task.

.fixed1 {
  position: fixed;
  top: 0;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: yellow;
}
.fixed2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}
.relative {
  margin-top: 25px;
  width: 50px;
  height: 50px;
  background-color: blue;
}
.absolute {
  position: absolute;
  left: -25px;
  width: 50px;
  height: 50px;
  background-color: green;
}

<html>
  <div class="fixed1">
    <div class="relative">
      <div class="absolute"></div>
    </div>
  </div>
  <div class="fixed2">
    fixed1
  </div>
</html>

As you can see in the above example, there are 2 fixed divs and there is 1 relative div in the first fixed div.
And I am going to show 1 absolute div in the relative div. but it is hidden by the second fixed div.
How to show the whole absolute div without any hidden part.

>Solution :

Just replace your blocks in HTML.

.fixed1 {
  position: fixed;
  top: 0;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: yellow;
}
.fixed2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}
.relative {
  margin-top: 25px;
  width: 50px;
  height: 50px;
  background-color: blue;
}
.absolute {
  position: absolute;
  left: -25px;
  width: 50px;
  height: 50px;
  background-color: green;
  z-index: 1000;
}

<html>
<div class="fixed2">
    fixed1
  </div>
  <div class="fixed1">
    <div class="relative">
      <div class="absolute"></div>
    </div>
  </div>
  
</html>