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

OPCIÓN A

la A pro supuesto porque el contenedor amarillo es hijo del contenedor azul y aunque el contenedor amarillo tenga un valor mas alto que los dos esta amarrado al contenedor azul que es su padre y este tiene un valor menor al contenedor rojo.