'Increase z-index of child [duplicate]

I'm trying to make a child's div higher than the parent's. Is there a way to do so?

<div class="main_wrapper" style="position:relative; margin-top:-3rem; padding: 3rem, 4rem; z-index:-1;">
   <div class="child" >
     here I created a box that has a z-index of -1 since it inherited it. 
     Can I change it to higher than the main_wrapper?
  </div>
</div>
cssz-index


Solution 1:[1]

You should be able to set z index in the css, and you can use selectors to help impact what you need to. for this instance, you could do the following:

Child Combinator

main_wrapper > div { z-index: 1 }

or if you are going to give the child elements classes you might as well use it to set the z index.

.class { z-indez: 1 }

either way id move all the html inline styling to the class, as it's a better practice to keep styling outside of the template in most cases

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 iamaword

Related Questions