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

monitores-Samsung-M8

Samsung M8: un monitor que es también smart tv y mucho más…

Hay quien usa tres monitores a la vez para trabajar. El segmento de los monitores de PC avanza rápidamente. Hace solo unos años la tendencia era adquirir monitores curvos, pero hoy la dinámica vuelve al llano y, por supuesto, a la extrema delgadez. No obstante, Samsung va más allá con su nuevo monitor Samsung M8.

Huawei-P50-Pro

Las mejores aplicaciones para disfrutar el nuevo Huawei P50 Pro

Huawei ha anunciado los nuevos smartphones Huawei P50 Pro y P50 Pocket, las últimas incorporaciones a su icónica línea de productos de la Serie P. Con cada lanzamiento de la Serie P, la marca china sigue mostrando toda su capacidad innovadora ya sea a nivel de rendimiento y especificaciones de los terminales como por todo

Poly-Sync-10

Poly lanza un nuevo altavoz inteligente para el trabajo híbrido: Sync 10

Poly ha anunciado recientemente el lanzamiento del Poly Sync 10, la última incorporación a su conocida familia de altavoces inteligentes y manos libres, Poly Sync. El nuevo dispositivo responde a las necesidades emergentes de empresas y profesionales, que tienen que desenvolverse de forma eficiente en un contexto de trabajo cada vez más híbrido, flexible y

CCleaner 2022

Novedades importantes con la herramienta CCleaner

Hoy vamos a hablar de CCleaner, una herramienta que cuenta con cientos de millones de usuarios domésticos y empresariales en todo el mundo que trabaja para optimizar el rendimiento de los equipos, mejorar la seguridad de los mismos y prolongar la vida útil de los ordenadores.   CCleaner es el rey del mantenimiento en lo

resistencia-Cat-phones

Cat phones, una década brillando con los dispositivos más resistentes

Hay marcas que huyen del mainstream y son casos de éxito. Cat phones es una de esas compañías que se ha alejado de lo convencional para centrarse en otras necesidades y convertirse así en grandes expertos en la resistencia de sus dispositivos. De la mano de Bullitt Group, la firma celebra 10 años de trayectoria