-1

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>
Josh Mein
  • 28,107
  • 15
  • 76
  • 87
Iroro
  • 37
  • 1
  • 9

1 Answers1

0

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

iamaword
  • 1,327
  • 8
  • 17
  • Hey @iamaword, thanks for your reply. Please bear in mind that I didn't use inline style - I just wanted to make the question look neat here, also giving the child div a z -index of 1 or higher number doesn't bring it out of the main div that has the z-index of -1. is there some other way to try? – Iroro Mar 10 '22 at 22:15