Cuando creamos sitios web, a menudo queremos superponer diferentes elementos para crear diseños e interfaces atractivos y ricos. Pero si dos elementos se superponen, ¿cómo controlas cuál está encima?
Como ocurre con muchas cosas en el diseño web, la respuesta está en CSS, específicamente en la propiedad z-index. La propiedad z-index es una de las propiedades más importantes de CSS porque le permite controlar el orden en que se organizan los elementos en una página web.
En esta publicación, repasaremos qué significa la propiedad z-index en CSS, cómo usarla y algunos consejos sobre cómo aprovecharla al máximo en sus proyectos. Empecemos.
¿Qué es el índice Z?
Z-index es una propiedad de CSS que controla el orden en que los elementos se superponen en la página. El elemento con el valor de índice Z más alto aparecerá antes que el elemento con el valor de índice Z más bajo.
La propiedad se llama «índice z» porque determina el orden de los elementos a lo largo del eje Z. Si el eje X se mueve de izquierda a derecha y el eje Y se mueve de arriba a abajo, el eje Z agrega «hacia» y » distancia». Los elementos con un índice Z más alto aparecen más cerca del usuario y los elementos con un valor más bajo aparecen más lejos.
Si dos elementos de página se superponen y no se especifica ningún índice z (o ambos tienen el mismo valor de índice z), el último elemento colocado en el código HTML aparece en la parte superior del elemento colocado antes en el código. Además, los artículos a los que se les ha asignado un valor de artículo (que no sea estáticopredeterminado) aparecen encima de los elementos sin posición de pila.
Cómo usar el índice Z
La propiedad z-index utiliza la siguiente sintaxis:
z-index: [integer]
<!-- or -->
z-index: auto
La propiedad del índice z es un número entero. Cuanto mayor sea el número entero, mayor será el elemento en el orden de apilamiento. Por ejemplo, si tiene dos artículos detrás índice z Con 0 y 1artículo un índice z Con 1 estará antes del elemento z índice z Con 0.
El índice Z también puede tomar un valor automáticoque establece el nivel de pila del elemento en 0valor por defecto.
Veamos un ejemplo. Primero, aquí hay una pila de cuatro divs sin propiedad de índice z:
ver la pluma índice z: ejemplo de apilamiento (sin índice z) por HubSpot (@hubspot) en CódigoPen.
Como puede ver, el orden de apilamiento depende del orden de los divs en el HTML. Cada div se coloca encima del div que tiene delante.
Ahora usemos el índice Z para invertir este orden:
ver la pluma índice z: ejemplo de apilamiento (con índice z) por HubSpot (@hubspot) en CódigoPen.
En este ejemplo, estamos usando el índice Z para anular la pila predeterminada. Ahora el primer div («primero») escrito está en la parte superior de la pila.
Tenga en cuenta que en estos ejemplos, los elementos div también tienen un posición valor. Para controlar un elemento con la propiedad de índice z, el elemento debe tener un valor para posición no es estático (defecto). z-index se aplicará a los elementos detrás posición Con pariente, él arregló, absolutoo pegajoso. Para obtener más información sobre cómo CSS posición la propiedad funciona, consulte nuestra guía de introducción a los elementos CSS.
El índice z también puede tomar valores enteros negativos como -1. porque por defecto índice z el valor de los elementos de la página es 0los elementos con un valor de índice z negativo aparecen después de los elementos sin un valor de índice z establecido.
ver la pluma índice z: ejemplo de pila (valores negativos) por HubSpot (@hubspot) en CódigoPen.
El contexto de la pila de índices de
Al usar el índice z, también es importante considerar cómo afecta el apilamiento en elementos anidados a medida que las cosas se vuelven un poco más complejas.
Un valor de índice Z coloca un elemento en el eje Z en relación con otros elementos en el mismo contexto de pila. Un contexto de pila es un grupo de elementos que comparten el mismo padre y cuyos valores de índice Z se comparan entre sí.
En los ejemplos anteriores, todos los elementos div estaban en el mismo contexto de pila, siendo hijos directos
ver la pluma índice z: ejemplo de contexto de apilamiento 1 por HubSpot (@hubspot) en CódigoPen.
En este ejemplo, tenemos dos contenedores div (indicados por recuadros negros), cada uno con dos elementos secundarios. Cada uno de estos contenedores tiene su propio contexto de pila.
si tomamos contenedor-2 y deslízalo por debajo contenedor-1podemos ver cómo se comportan estos contextos de pila:
ver la pluma índice z: ejemplo de contexto de apilamiento 2 por HubSpot (@hubspot) en CódigoPen.
Tenga en cuenta que el div 4 viene antes que el div 1, aunque el div 1 tiene un índice Z más alto que el div 4.
Eso es porque contenedor-2 sam tiene una relación Z más alta que contenedor-1. Por lo tanto, todos los niños en el medio contenedor-2 se sentará frente a todos los elementos del bebé en el interior contenedor-1independientemente de sus valores de índice Z. Los valores de índice Z solo especifican una posición relativa a otros elementos en el mismo contenedor (es decir, mismo contexto de apilamiento).
Para una mirada más profunda al contexto de las pilas, mire este video tutorial de Kevin Powell:
Controla tu pila de artículos con el índice Z.
Cuando se usa correctamente, z-index es una herramienta poderosa pero fácil de entender para organizar elementos de la manera correcta y es esencial para cualquier persona que esté aprendiendo CSS o Bootstrap CSS. ¡Solo asegúrese de que sus valores de índice Z estén en orden para no perderse en las capas!