An absolute div is hidden by a fixed div-CodePudding

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 >
    <div >
      <div ></div>
    </div>
  </div>
  <div >
    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.

CodePudding user response：

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 >
    fixed1
  </div>
  <div >
    <div >
      <div ></div>
    </div>
  </div>
  
</html>

CodePudding user response：

There are multiple ways of doing this

Move div.fixed1 below div.fixed2

(or)

You can increase the z-index of div.fixed1

.fixed1 {
  z-index: 1;
}

CodePudding user response：

Use the property z-index, so you will specify that div.fixed1 is in front of div.fixed2:

.fixed1 {
  position: fixed;
  top: 0;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: yellow;
  z-index: 1;
}
.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;
}

<div >
  <div >
    <div ></div>
  </div>
</div>
<div >
  fixed1
</div>