jairogarcíarincón

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 05 de Febrero de 2025

css3csshtml