Cómo colocar elementos superpuestos con CSS y Z-Index

Cómo colocar elementos superpuestos con CSS y Z-Index

Cómo colocar elementos superpuestos con CSS y Z-Index

VALORACIÓN DEL ARTÍCULO:
5/5


Uno de los retos al utilizar el posicionamiento CSS para el diseño de páginas web es que algunos de sus elementos pueden solaparse con otros. Esto funciona bien si quieres que el último elemento en el HTML esté en la parte superior, pero ¿qué pasa si no lo haces o si quieres tener elementos que actualmente no se superponen a otros para hacerlo porque el diseño requiere este aspecto de «capas»? Para cambiar la forma en que los elementos se superponen, es necesario utilizar la propiedad de CSS.

Si ha utilizado herramientas gráficas en Word y PowerPoint o un editor de imágenes más robusto como Adobe Photoshop, lo más probable es que haya visto algo como un índice z en acción. En estos programas, puede resaltar el objeto u objetos que ha dibujado y elegir la opción «Enviar al fondo» o «Traer al frente» de ciertos elementos del documento. En Photoshop, usted no tiene estas funciones, pero sí tiene el panel «Layer» del programa y puede organizar donde cae un elemento en el lienzo reorganizando estas capas. En ambos ejemplos, está configurando esencialmente el índice z de esos objetos.

¿Qué es Z-Index?

Cuando se utiliza el posicionamiento CSS para posicionar elementos en la página, es necesario pensar en tres dimensiones. Hay dos dimensiones estándar: izquierda/derecha y arriba/abajo. El índice de izquierda a derecha se conoce como índice x, mientras que el de arriba a abajo es el índice y. Así es como se posicionan los elementos horizontal o verticalmente, utilizando estos dos índices.

Cuando se trata de diseño web, también está el orden de apilamiento de la página. Cada elemento de la página puede estar por encima o por debajo de cualquier otro elemento. La propiedad z-index determina en qué parte de la pila se encuentra cada elemento. Si el índice x y el índice y son las líneas horizontales y verticales, entonces el índice z es la profundidad de la página, esencialmente la tercera dimensión.

Piense en los elementos de una página web como pedazos de papel y en la propia página web como un collage. El lugar donde se coloca el papel se determina por la posición, y cuánto de él está cubierto por los otros elementos es el índice z.

  • El índice z es un número, ya sea positivo (p. ej. 100) o negativo (p. ej. -100).
  • El índice z predeterminado es 0.

El elemento con el índice Z más alto se encuentra en la parte superior, seguido por el siguiente más alto y así sucesivamente hasta el índice Z más bajo. Si dos elementos tienen el mismo valor de z-index (o no está definido, es decir, el valor por defecto es 0) el navegador los colocará en el orden en que aparecen en el HTML.

Cómo usar Z-Index

Dé a cada elemento que desee de su pila un valor de índice Z diferente. Por ejemplo, si tiene cinco elementos diferentes:

  • elemento A – índice z de -25
  • elemento B – índice z de 82
  • elemento C – z-index no definido
  • elemento D – índice z de 10
  • elemento E – índice z de -3

Se apilan en el siguiente orden:

  1. elemento B
  2. elemento D
  3. elemento C
  4. elemento E
  5. elemento A

Se recomienda utilizar valores de índice z muy diferentes para apilar los elementos. De esta manera, si agrega más elementos a la página más tarde, tendrá espacio para superponerlos sin tener que ajustar los valores del índice z de todos los demás elementos. Por ejemplo:

  • 100 para su elemento más importante
  • 0 para su elemento central
  • -100 para su elemento inferior

También puede dar a dos elementos el mismo valor de índice z. Si estos elementos están apilados, se mostrarán en el orden en que están escritos en el HTML, con el último elemento en la parte superior.

Una nota: para que un elemento pueda utilizar eficazmente la propiedad z-index, debe ser un elemento a nivel de bloque o utilizar una visualización de «bloque» o «bloque en línea» en su archivo CSS.

Deja un comentario

TAMBIÉN TE INTERESA

skyshowtime

Una nueva plataforma de streaming se presenta en Europa: llega SkyShowtime

Llega a Europa SkyShowtime para sumarse a la importante oferta que tienen los consumidores en sus televisiones inteligentes. Netflix, Prime Video, HBO Max, Disney+, Dazon… y ahora este nuevo servicio de streaming que se ha presentado recientemente en Europa.   Por el momento llegará primero a los países nórdicos. SkyShowtime se estrena en Dinamarca, Finlandia,

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,