0

I am trying to make the black box appear behind the oval-shaped element (parent). Therefore, I decided to use the z-index, setting the parent's to a higher value than the child. However, the child is still appearing above the parent. I solved the issue by setting the child's z-index to -1 and removing the z-index property from the parent. But I don't understand why that works, what if I want to keep the z-index property in the parent?

Here is my HTML:

   <div id="x">
     <div id="y"> </div>
   </div>

Here is my CSS:

#x{
  position: relative;
  margin-top:40px;
  height:400px;
  width:250px;
  border-radius: 40%;
  margin-left: 30%;
  background: linear-gradient(to bottom,  #f5e050 78%, #517693 0%);
  z-index:9999;

}
#y{
  height: 5%;
  width: 15%;
  position: absolute;
  top:97%;
  left:36%;
  background-color:black;
  z-index: 1;
}
marwagaser
  • 67
  • 1
  • 1
  • 9
  • As you know, when you set z-index to Y, it can place on the X scope, and Y is the child of X. If you move the Y out of the X scope, your expectation is reasonable. Imagine you have some other chid for X, that you can use z-index to manage them for witch is up and down a layer of view. – Behrouz Pooladrak May 12 '20 at 04:23
  • @PoulBak This does not solve the problem – marwagaser May 12 '20 at 04:32
  • negative z-index on child and no z-index on parent – Temani Afif May 12 '20 at 10:59

0 Answers0