jairogarcíarincón

Propiedades CSS avanzadas: position y z-index


1.81K

Introducción



En este apartado introduciremos algunos conceptos más avanzados del diseño de interfaces con CSS, en concreto las propiedades:

  • position
  • z-index


Además, prestaremos especial atención a la propiedad flex, por su importancia a la hora de crear estructuras flexibles y fáciles de adaptar a diferentes dispositivos.

Position



Una propiedad importante a la hora de ubicar los elementos en pantalla es position. Esta propiedad, cuyo valor por defecto es static, permite especificar el tipo de posicionamiento utilizado, a saber:

  • static: Los elementos se posiciona en el orden en que son declarados. Es la opción por defecto.
  • relative: El elemento se posiciona de manera relativa a su posición normal. De este modo, si por ejemplo añadimos left: 20px; el elemento se moverá 20px a la izquierda.
  • absolute: El elemento se posiciona en relación a su elemento "padre". En este caso además, la propiedad float estudiada en el apartado Hojas de estilo CSS será ignorada.
  • fixed: El elemento se posiciona en relación a la ventana del navegador.


Por otro lado, hemos puesto como ejemplo el uso de la propiedad left, pero de igual modo, es posible utilizar right, top y/o bottom para posicionar elementos que no sean de tipo static.

Por último, al añadir a varios elementos la propiedad position: absolute o position: fixed, podemos encontrarnos con que unos queden encima de otros. Es posible gestionar la disposición de estos elementos en capas utilizando la propiedad z-index.

De este modo, un elemento con z-index: 2 estará por delante de otro con z-index: 1. Es posible además utilizar valores negativos de z-index.

En el siguiente ejemplo se detallan y explican todas las posibilidades relativas a position y z-index.

Partiremos de un documento HTML sencillo con 4 cajas numeradas de colores y que nos servirán de base para definir las propiedades:



A partir de aquí, definimos un CSS que nos permitirá probar las diferentes posibilidades dentro de un archivo css/style.css:



En el siguiente enlace puedes comprobar y analizar el resultado. Prueba a ir comentando las diferentes secciones HTML o CSS para una mejor visualización:

VER EJEMPLO DE POSITION Y Z-INDEX

Conclusiones



Para terminar de aclarar los conceptos, el siguiente enlace muestra un ejemplo de los distintos valores de la propiedad position:

Ver ejemplo de W3 Schools


Publicado el 03 de Octubre de 2022

css3csshtml