Z-index anyone willing to help me debug this?

Question

anyone willing to look at the code and help me with a z-index problem. I want the second section to stack on top of the hero. Right now the h1,p and mouse icon don't seem to stay behind the second section

https://code.sololearn.com/WY45hIpPk848/?ref=app

Answer 1

try this

make z-index:-1 of hero

this will solve your problem

Answer 2

Sure, The problem with z index is, when you introduce the position property into the styling, any positioned elements (and their children) are displayed in front of any non-positioned elements. so this pretty much explains your problem.

Answer 3

I have added comment lines to edits

https://code.sololearn.com/WNA5kWW5Om5f/#

Answer 4

thank you very much for the help. I tried adding a z-index of 1 to the hero and a z-index of 2 on the section, it didn't work but I am greatful for all the help. can you explain why the opproach I took didn't work?

Answer 5

simple and great answer thank you again this has been very helpful