Share
los índice z La propiedad en CSS parece bastante simple, pero hay mucho por descubrir debajo de la superficie si realmente quieres entender cómo funciona. En este tutorial, clarificaremos el funcionamiento interno de z-index, mirando contextos de apilamiento y algunos ejemplos prácticos.
CSS proporciona tres esquemas de posicionamiento diferentes para el diseño de cajas:
El último elimina por completo un elemento del flujo normal y confía en el desarrollador para que le indique dónde se debe mostrar..
Le asigna los valores superior, izquierdo, inferior y derecho para colocar el elemento en un espacio bidimensional, pero CSS también le permite colocarlo en la tercera dimensión utilizando la propiedad z-index.
En la superficie, el índice z parece una propiedad fácil de usar. Establece valores para determinar dónde se ubicará el elemento en este tercer eje, y listo. Debajo de la superficie hay mucho más para sumergirse, incluyendo una serie de reglas para los tipos de elementos que se ubican encima de los demás..
Comencemos con lo básico para asegurarnos de que todos estemos en la misma página y luego hablaremos sobre el apilamiento para comprender más de lo que está pasando con el índice z detrás de la escena..
Estoy seguro de que estás familiarizado con el espacio de coordenadas tridimensional. Tenemos un eje x que normalmente se usa para representar la horizontal, un eje y para representar la vertical y un eje z para representar lo que sucede dentro y fuera de la página, o la pantalla en nuestro caso.
No literalmente ver El eje z, ya que la pantalla es un plano bidimensional. Lo vemos en forma de perspectiva y de algunos elementos que aparecen delante o detrás de otros elementos cuando comparten el mismo espacio bidimensional..
Para determinar dónde se encuentra un elemento a lo largo de este tercer eje, CSS nos permite establecer tres valores en la propiedad z-index.
Por el momento vamos a centrarnos en el valor entero. Esto puede ser positivo, negativo o 0. Cuanto mayor sea el valor, más cerca del espectador aparecerá el elemento. Cuanto menor sea el valor, más lejos aparecerá.
Si dos elementos se colocan de manera que ambos ocupen un área compartida de espacio bidimensional, el elemento con el índice z mayor ocultará u ocluirá el elemento con el índice z inferior en las áreas donde comparten el espacio.
Supongo que lo anterior es fácil de entender y lo más probable es que se comporte exactamente como usted espera. Sin embargo, hay algunas preguntas sin respuesta dando vueltas.
Para responder a estas preguntas, necesitamos entender más sobre cómo funciona el índice z, específicamente la idea de apilar contextos, niveles de apilamiento y órdenes de apilamiento..
Los contextos de apilamiento y los niveles de apilamiento pueden ser un poco difíciles de conceptualizar, por lo que, por un momento, imagine una mesa con un montón de elementos colocados sobre ella. La tabla representa un contexto de apilamiento. Si hay una segunda tabla junto a la primera, eso representa otro contexto de apilamiento.
Ahora imagine que en la primera mesa hay cuatro bloques pequeños, todos sentados directamente sobre la mesa. Encima de estos cuatro bloques hay un plato de vidrio y encima del plato de vidrio hay un tazón de fruta. Los bloques, la placa de vidrio y el frutero representan un nivel de apilamiento diferente dentro del contexto de apilamiento que es la tabla.
Se crea un único contexto de apilamiento predeterminado para cada página web. La raíz de este contexto (la tabla) es la html elemento. Todo dentro de la etiqueta html se encuentra en un nivel de apilamiento dentro de este contexto de apilamiento predeterminado (objetos sentados en la mesa).
Cuando asigna un valor de índice z que no sea automático a un elemento, creará un nuevo contexto de apilamiento con nuevos niveles de apilamiento que son independientes de otros contextos de apilamiento y niveles de apilamiento en la página. Traes otra mesa a la habitación para que se sienten los objetos..
La forma más fácil de entender el orden de apilamiento es con un ejemplo simple, tan simple que ni siquiera consideraremos los elementos posicionados por un momento.
Piense en una página web muy simple. Aparte de la predeterminada ¿Qué esperas ver cuando cargues la página?? Es de esperar que no te haya tomado mucho tiempo imaginar una pantalla en su mayoría azul, con la excepción de un bloque de color rojo que tiene las dimensiones establecidas para el ancho y la altura del div. El bloque rojo está probablemente en la parte superior izquierda de la página, a menos que dejes que tu imaginación vuele un poco y le des más css para mostrarlo en otro lugar.. Podría estar pensando "y qué, eso fue bastante obvio", pero lo que podría no ser tan obvio es por qué ve un bloque rojo sobre un fondo azul. ¿Por qué ves la div en la parte superior del elemento html? La razón es porque ambos están siguiendo las reglas de orden de apilamiento. En el caso de este simple ejemplo, las reglas dicen que los bloques descendientes en el flujo normal (div) se sitúan en un nivel más alto que los fondos y bordes del elemento raíz (el elemento html). Ves el div en la parte superior porque está en un nivel de apilamiento más alto. Mientras que el ejemplo anterior solo contiene una pila de dos niveles, hay siete niveles posibles en cada contexto de apilamiento, que se enumeran a continuación. Estos siete niveles forman las reglas de orden de apilamiento. Un elemento en el nivel siete se mostrará arriba (más cerca del espectador) que los elementos en los niveles uno a seis. Un elemento en el nivel cinco se muestra sobre un elemento en el nivel dos. Un elemento en ... bueno, ya entiendes la idea. La primera vez que encontré las reglas de orden de apilamiento anteriores, algunas cosas se destacaron para mí. Si solo observa los niveles dos, seis y siete (aquellos en los que se menciona el índice z), se ajusta a lo que probablemente asuma sobre el índice z. El índice z positivo está en un nivel más alto que 0 índice z, que está en un nivel más alto que el índice z negativo. Probablemente ahí es donde la mayoría de nosotros dejamos de pensar en todas estas capas de apilamiento, aunque. Antes de estas reglas, habría asumido que todo lo demás era equivalente a un índice z de 0. Claramente eso no es así. De hecho, casi todo se encuentra en un nivel por debajo del índice z = 0. Lo que también es interesante es que los elementos no posicionados están ubicados en cuatro niveles de apilamiento diferentes. Tiene sentido cuando lo piensas. Si todos los elementos no posicionados estuvieran en el mismo nivel de apilamiento, no veríamos texto (cuadro en línea) encima de un div (cuadro a nivel de bloque). Un par de veces he mencionado la creación de nuevos contextos de apilamiento. Cuando asigna un valor de índice z distinto de Pensemos de nuevo en las tablas como contextos de apilamiento. Antes, teníamos una mesa y encima de la mesa había cuatro bloques, un plato de vidrio y un frutero. Imagina que la segunda mesa que presentamos también tiene cuatro bloques del mismo tamaño y un plato de vidrio en la parte superior, pero sin frutero.. Usted esperaría que el frutero de la mesa uno sea el elemento más alto en la habitación. Se encuentra en el nivel más alto (tiene el mayor índice z). ¿Qué pasaría si moviéramos la mesa uno y todo lo que estaba encima al sótano? Ese frutero ahora sería más bajo que todo en la tabla dos, porque la tabla uno se ha movido a un nivel debajo de la tabla dos.. Lo mismo sucede con los elementos posicionados en una página web. Considere el marcado y el estilo a continuación. Será HTML: CSS: Aunque div.two tiene el mayor índice z (100), en realidad se ubica debajo de div.four (z-index = 50) en la página. Puedes ver el resultado del código de arriba en la imagen de abajo. Los bordes negro y amarillo muestran los diferentes contextos de apilamiento en los que se encuentra cada elemento.. Como div.two está contenido dentro de div.one, su índice z es relativo a Lo que hemos hecho se mueve. Si eres como yo, es probable que esto te haya disparado una o dos veces cuando trabajas con z-index. Esperemos que estos ejemplos ayuden a aclarar por qué un elemento con un índice z mayor a veces termina mostrando detrás de otro elemento con un índice z más bajo. Cuando lo encuentras por primera vez, la propiedad del índice z parece una propiedad muy simple de entender. Los valores representan una ubicación en un eje dentro y fuera de la pantalla, y eso es todo. Una mirada más profunda al índice z revela que hay algo más detrás de escena. Hay contextos de apilamiento, niveles de apilamiento y reglas para determinar qué elemento se muestra más alto o más bajo en el orden de apilamiento. Los elementos posicionados pueden crear nuevos contextos de apilamiento, y los niveles completos de apilamiento se mostrarán por encima o por debajo de todos los niveles en otro contexto de apilamiento., , , etc encontrará en cada página web hay una sola
Los siete niveles en un contexto de apilamiento.
Poniendolo todo junto
auto a un elemento creas un nuevo contexto de apilamiento, independiente de otros contextos de apilamiento.div.two mostrar arriba o abajo div.?div ancho: 200px; altura: 200px; relleno: 20px; .one, .two, .three, .four position: absolute; .one background: # f00; esquema: 5px sólido # 000; superior: 100px; izquierda: 200px; índice z: 10; .two background: # 0f0; esquema: 5px sólido # 000; superior: 50px; izquierda: 75px; índice z: 100; .three background: # 0ff; esquema: 5px sólido # 000; superior: 125px; izquierda: 25px; índice z: 150; .four background: # 00f; esquema: 5px sólido # ff0; superior: 200px; izquierda: 350px; índice z: 50;
div.one's pila. En efecto lo que realmente tenemos es lo siguiente:
div.one y todo lo que contiene debajo div.. No importa qué valores configuramos en la propiedad z-index de elementos dentro div.one siempre se mostrarán debajo div..
Conclusión
Otras lecturas
Accentsconagua