Gestión del Orden de Apilamiento de los Elementos
La propiedad z-index
determina el orden de apilamiento de los elementos posicionados en una página web. Solo se aplica a los elementos posicionados, es decir, aquellos que tienen un valor de posición absolute
, fixed
, relative
o sticky
. Como estos elementos se sacan del flujo normal del documento, para determinar cuál de estos elementos posicionados debe mostrarse por encima o por debajo, se especifica z-index
.
z-index: number_without_units
Cuanto mayor sea el valor de la propiedad z-index
, más arriba se mostrará el elemento en la pantalla del usuario.
Vamos a practicar. Tenemos cuatro elementos div
con la clase box
, cada uno estilizado como un cuadrado y numerado para representar su orden en el documento html
. Actualmente, los cuadrados están posicionados uno encima del otro. La tarea consiste en ajustar la propiedad z-index con los valores correctos para llevar el cuadrado 3 al frente y enviar el cuadrado 4 al fondo.
index.html
index.css
Nota
Si asignamos el mismo valor a la propiedad
z-index
en diferentes elementos, el navegador mostrará los elementos en el orden en que aparecen en el archivohtml
.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
How do I set the z-index values to bring square 3 to the front and square 4 to the back?
Can you explain what happens if two elements have the same z-index value?
Can you show an example of how the z-index property is used in CSS?
Awesome!
Completion rate improved to 2.04
Gestión del Orden de Apilamiento de los Elementos
Desliza para mostrar el menú
La propiedad z-index
determina el orden de apilamiento de los elementos posicionados en una página web. Solo se aplica a los elementos posicionados, es decir, aquellos que tienen un valor de posición absolute
, fixed
, relative
o sticky
. Como estos elementos se sacan del flujo normal del documento, para determinar cuál de estos elementos posicionados debe mostrarse por encima o por debajo, se especifica z-index
.
z-index: number_without_units
Cuanto mayor sea el valor de la propiedad z-index
, más arriba se mostrará el elemento en la pantalla del usuario.
Vamos a practicar. Tenemos cuatro elementos div
con la clase box
, cada uno estilizado como un cuadrado y numerado para representar su orden en el documento html
. Actualmente, los cuadrados están posicionados uno encima del otro. La tarea consiste en ajustar la propiedad z-index con los valores correctos para llevar el cuadrado 3 al frente y enviar el cuadrado 4 al fondo.
index.html
index.css
Nota
Si asignamos el mismo valor a la propiedad
z-index
en diferentes elementos, el navegador mostrará los elementos en el orden en que aparecen en el archivohtml
.
¡Gracias por tus comentarios!