Instagram | Twitter | LinkedIn
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
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
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.