Ah, I understand now! Thank you so much!! 
1 Like
Are there any reason to use 5 value for z instead of 1?
I suppose that z-index default value is 0. 1 is greater than 0 and that’s enough.
From earlier in the thread,
Thank you! great explanation!
1 Like
What could a use case be for overlapping elements in the grid? I’m unsure of how this could be useful.
Is there a reason why the right element was overlapping the ‘overlap’ element when the left one wasn’t? This is for instruction 3 which is then rectified with instruction 4 (z-index). I understand if this is just for the purpose of the lesson but just want to know if I am missing something or just looking too far into this. I cannot see anything in the .css or .html that would cause this. Thanks.
HTML is read from top to bottom. In index.html, you will find:
<section class="left">
<h2>Left</h2>
</section>
<div class="overlap">
<h3>Overlap!</h3>
</div>
<section class="right">
<h2>Right</h2>
</section>
That is why the overlap div appears on top of the left section but underneath the right section.
If in index.html, you move the overlap div before the two sections, then the overlap div will be underneath both sections.
If in index.html, you move the overlap div below the two sections, then the overlap div will be on top of both sections.
Once you set the z-index for the overlap div, then the overlap div will appear on top regardless of whether in index.html, the overlap div is placed above, below or in between the two sections.
1 Like
Thanks for that! I was staring at this for a while and didn’t even notice the div.