Propiedad Z-INDEX en CSS

Anterior
Avanzar

Vamos a aprender a usar la propiedad Z-INDEX de CSS, una propiedad muy sencilla que puede llegar a complicarse y es muy poderosa, nos permite establecer el orden de apilamiento de un elemento posicionado, es decir ordenar elementos después de haber removido el flujo normal de una página, algo que es casi inevitable cuando trabajamos con CSS, pues bien, ya que estamos aquí, desarrollemos esta lección.

Para que sirve la propiedad Z-index

Z-index es una propiedad que está pensada para ordenar elementos en el eje Z, prácticamente es el eje que sale del plano de la pantalla; en palabras sencillas, Z-index sirve para poner elementos uno sobre otros.

Cabe recalcar que z-index actúa sobre elementos posicionados, es decir, que posean la propiedad position y además su cuyo valor sea distinto de static. z-index no actúa sobre elementos no posicionados.

Z-index puede ser más complicado de lo que parece, sin embargo ya que estás empezando, esta lección te irá de maravilla para aprender.

Observa la imagen, asume que los bloques estan posicionados como absolutos; notarás que el bloque 3 se superpone sobre 1 y 2, esto es debido al orden en que apareen en el documento HTML… Pero a partir de ahora es posible cambiar dicho orden empleando la propiedad Z-INDEX con un valor determinado.

Cuando trabajamos el diseño web siempre se suele romper con el flujo normal, es el caso de los posicionamientos que vimos en anteriores lecciones; cómo elementos sacados de su flujo normal se superponen sobre otros y otros quedan por detrás.

Te recomendamos leer:  Modelo de cajas CSS

Valores para la propiedad z-index

  • auto.- La caja no establece un nuevo contexto de apilamiento. El nivel de apilamiento de la caja generada es el mismo que el de la caja padre.
  • entero.- pude ser un número entero.
  • inherit.- hereda del elemento padre.

Los elementos con z-index cuyos valores son mayores se superponen sobre aquellos que tienen menor valor numérico.

Ejemplo de z-index

El primer ejemplo se trata de tres bloques posicionados como absolutos, de distintos colores y medidas, estableceremos los valores adecuados para z-index, de tal manera que podamos controlar quien se superpone a quien…

Código HTML

<div class="primero">ROJO</div>
<div class="segundo">AZUL</div>
<div class="tercero">AMARILLO</div>

Resultado sin aplicar z-index, los bloques se muestran en el mismo orden en que aparecen:

Código CSS

div {
  width: 100px;
  height: 100px;
  position: absolute;
}
div.primero {
  background-color: red;
  top: 50px;
  left: 30px;
  z-index:10;
}
div.segundo {
  background-color: blue;
  top: 100px;
  left: 80px;
  z-index:5;
}
div.tercero {
  background-color: yellow;
  top: 150px;
  left: 130px;
  z-index:1;
}

Resultado después de aplicar z-index con valores: 1 para amarillo, 5 para azul y 10 para rojo:

Nota que el bloque con mayor z-index se superpone sobre los demás.

Aquí no termina todo, para entender mejor la propiedad z-index es necesario entender lo que son los contextos de apilamiento.

Contextos de apilamiento

Un contexto de apilamiento aparece dentro del documento cuando se establece una posición distinta de estático para un determinado elemento, cuando se trata de un elemento raíz HTML y también aparece cuando se establecen propiedades como: opacity, transform, filter, perspective, etc. con valores distintos al por defecto.

No me voy a liar explicando esto, ya que aún no tocamos dichos temas, sin embargo seré bastante práctico.

Te recomendamos leer:  La propiedad Background color e imagen de fondo en CSS

Observa la imagen, cada bloque esta identificado y posee un z-index determinado.

Imagina que tenemos varios bloques de contenido, ahora imagina que dentro de dichos bloques existen otros bloques y así sucesivamente, padres e hijos. Cada bloque constituye un contexto de apilamiento siempre y cuando cumpla con lo que mencionamos, principalmente cuando se establece posición distinta de estático para un bloque cualquiera.

Ahora, para la propiedad z-index cada bloque es independiente, dentro de cada bloque padre, z-index puede tomar un valor y se cumplirá dentro de ese padre más no en otro, de tal manera que en otros bloques pueden haber z-index con mayor o menor valor que no influyen dentro de un bloque padre.

Entendiendo el alcance de acción de z-index

Esto es ¡genial! ¿viste lo que acaba de ocurrir en el anterior esquema? Pues el bloque 2 (verde) es padre de tres elementos hijo con z-index establecidos; ahora ocurre que z-index solo se cumple dentro de su región, no es afectado por los z-index de otros bloques. es evidente que el padre 2 si es afectado por sus hermanos.

En palabras sencillas z-index afecta a elementos hermanos.

Observa ¿Quién tiene el menor valor de z-index? El hijo 3 del bloque 2 con valor z-index de 10, pero esta sobre el bloque 3 que tiene z-index mayor, valor de 20, además se superpone a su padre que posee valor 40. Así podemos concluir que cada elemento padre es independiente y z-index afecta solo a hermanos.

Hasta aquí hemos llegado con el tutoríal de CSS, en la siguiente lecciones realizaremos algunos ejercicios prácticos, problemas con su solución, aplicando la mayor cantidad de propiedades posible; es más resolveremos el ultimo ejercicio de z-index pero con código completo, Pues aquí solo vimos una representación gráfica… ¿Quieres verlo? ¡Pues vamos por ello!

Te recomendamos leer:  Qué es CSS y Introducción a CSS

En este punto ya somo expertos de CSS 🙂 pero aquí no termina, ahora nos toca potenciar nuestro poder de diseño web con el curso de CSS3. Estoy seguro que te va a encantar pues ahora se suman nuevas propiedades potentes que nos harán volar en un mundo lleno de belleza…Bueno, mejor los conoceremos allí…

Lecciones CSS
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos