teffcode/css-quiz-the-stacking-context.md

## css-quiz-the-stacking-context.md

      
    Raw
  

              css-quiz-the-stacking-context.md
            
          
    👋🏼 Welcome 👋🏼


      Instagram |
      Twitter |
      LinkedIn


Choose your language 👅 


English
Spanish


English version 🚀 


Consider the following code:


CSS
HTML


What would you see in the browser ?


  Click here to see the correct answer and explanation 👀
  

Correct Answer
Explanation


A 🎉
yellow is rendered under red because red's z-index (5) is valid within the stacking context of the root element, while yellow's z-index (6) is valid within the stacking context of blue. So, yellow is under red, because yellow belongs to blue, which has a lower z-index value. See the code here.


Recommended reading 👉🏼 The stacking context


Spanish version 🚀 


Considera el siguiente código:


CSS
HTML


¿ Qué verías en el navegador ?


  Haz click aquí para ver la respuesta correcta y su explicación 👀
  

Respuesta correcta
Explicación


A 🎉
yellow es renderizado debajo de red porque el z-index (5) de red es válido dentro del contexto de apilamiento del elemento raíz, mientras que el z-index (6) de yellow es válido dentro del contexto de apilamiento de blue. Así que yellow está debajo de red, porque yellow pertenece a blue, que tiene un valor z-index menor. Mira el código aquí.


Lectura recomendada 👉🏼 El contexto de apilamiento