0

I have an element which covers the whole page and it has a background with some transparency. I wan this background to be ahead of all its children. How can I do that?

I tried with z-index and a lot of combinations of position, but I just don't get it.

This is a simple example of my code:

HTML:

<div class="overlay">
  <div class="mainDiv">
       <div class="subDiv"></div>
  </div>
</div>

CSS:

.overlay {
  height: 300px;
  background-color: rgba(117, 117, 117, 0.479);
  z-index: 10;
}

.mainDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8%;
}

.subDiv {
  height: 50px;
  width: 50px;
  background-color: green;
}

As you see I have a div with class overlay and another with class subDiv, the first one has a background-color and I want this background to overlay the subDiv element, but that is not happening.

Here is a codepen with the code:

https://codepen.io/WegisSilveira/pen/rNLQMXV

Berg_Durden
  • 1,531
  • 4
  • 24
  • 46
  • position:relative and negative z-index to subdiv – Temani Afif Nov 10 '20 at 15:44
  • fundemental issue that wont work. You only can use z-index to layer a parent above the children. unelss it has a transparent background, it will cover up the children entirely. So your best opition would be to use pseudo divs to emulate the wanted behavior. – tacoshy Nov 10 '20 at 15:44
  • @Temani Afif it works, but I am not sure if I can do that to my original project, since I have dozens of components. But I'll try anyway and let you know if it suits my situation. – Berg_Durden Nov 10 '20 at 15:54

0 Answers0