Overlaping Elements Css grid système


#1

Bonjour,
Dans l’étape numéro 3 de cet exercice : https://www.codecademy.com/fr/courses/learn-css-grid/lessons/css-grid-ii/exercises/overlapping-elements?action=resume_content_item&course_redirect=learn-css
Je ne comprends pas pourquoi l’item “overlap” ne fonctionne pas uniquement sur l’item “right”, il n’y a aucun de Z-index spécifié mais il semble tout de même y avoir un ordre caché dur à comprendre !


Hello,
In step number 3 of this exercise:

I do not understand why the item “overlap” does not work only on the item “right”, there is no Z-index specified but it still seems to be a hidden order hard to understand!

This is not a French language course so you will need to communicate in English as best you can. I just used Google Translate.


#2

Without a z-index, rendering follows normal flow… First the left, then the overlap, then the right.

    <section class="left">
      <h2>Left</h2>
    </section>
    <div class="overlap">
      <h3>Overlap!</h3>
    </div>
    <section class="right">
      <h2>Right</h2>
    </section>

If the order is changed in the source code,

    <section class="left">
      <h2>Left</h2>
    </section>
    <section class="right">
      <h2>Right</h2>
    </section>
    <div class="overlap">
      <h3>Overlap!</h3>
    </div>

Notice that now we can remove the z-index from the overlapping element and it still renders as expected. This is because it gets drawn on the screen last so is not partially concealed by the right element.

The order in which elements appear in the source code is the order in which they are drawn.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.