Introducción
En este apartado introduciremos algunos conceptos más avanzados del diseño de interfaces con CSS, en concreto las propiedades:
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:
Ver ejemplo de código
A partir de aquí, definimos un CSS que nos permitirá probar las diferentes posibilidades dentro de un archivo
css/style.css:
Ver ejemplo de código
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