Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Gestión del Orden de Apilamiento de los Elementos | Dominio del Posicionamiento en CSS
Técnicas Avanzadas de CSS

bookGestió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.html

index.css

index.css

copy

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 archivo html.

question mark

¿Cuál es el propósito de la propiedad z-index?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 10

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

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

bookGestió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.html

index.css

index.css

copy

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 archivo html.

question mark

¿Cuál es el propósito de la propiedad z-index?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 10
some-alt