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.
Ver índice del contenido
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 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 están posicionados como absolutos; notarás que el bloque 3 se superpone sobre 1 y 2, esto es debido al orden en que aparecen 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.
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.
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 puede 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 está 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 tutorial de CSS, en las siguientes lecciones realizaremos algunos ejercicios prácticos, problemas con su solución, aplicando la mayor cantidad de propiedades posible; es más resolveremos el último ejercicio de z-index, pero con código completo, Pues aquí solo vimos una representación gráfica… ¿Quieres verlo? ¡Pues vamos por ello!
En este punto ya somos expertos de CSS :), pero aquí no termina, ahora nos toca potenciar nuestro poder de diseño web con el curso de CSS3. Estoy seguro de 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í…
[popup_anything id=»4273″]