jairogarcíarincón
Introducción
Uno de los aspectos más importantes de la maquetación web es, como hemos visto, la distribución del contenido en pantalla. Además, este aspecto cobra más relevancia cuando tratamos de realizar diseños responsive o multi-dispositivo, esto es, diseños que se adaptan a diferentes pantallas tales como las de ordenadores, portátiles, tabletas o móviles.
La propiedad 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 posicionan 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 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:
039-layout-css.html
A partir de aquí, definimos un CSS que nos permitirá probar las diferentes posibilidades dentro de un archivo css/style.css:
040-layout-css.css
En ESTE ENLACE puedes comprobar y analizar el resultado. Prueba a ir comentando las diferentes secciones HTML o CSS para una mejor visualización.
También puedes aclarar los conceptos con ESTE EJEMPLO de W3 Schools sobre los distintos valores de la propiedad position.
Las propiedades display (block, inline, inline-block) y float
Otra propiedad importante a la hora de definir cómo se mostrarán los elementos en pantalla es display. Esta propiedad obtiene valores diferentes por defecto en función del tipo de elemento al que se esté refiriendo, tal y como ya vimos anteriormente. Los cuatro valores más utilizados son:
- block: Los elementos se posiciona como bloques uno debajo del otro, ocupando todo el ancho disponible aún cuando se le defina un ancho concreto. Es la opción por defecto en div, section, nav, article, header, footer, figure, etc.
- inline: Los elementos se posicionan uno al lado del otro, ocupando solo el ancho necesario. Es la opción por defecto en span, strong, em, u, a, mark, time, etc..
- inline-block:Los elementos se posicionan uno al lado del otro siempre que se defina un ancho (width) para ese elemento.
Por otra parte, la propiedad float nos permite convertir elementos de tipo block en elementos flotantes, de modo que puedan alinearse unos al lado de otros. Puede tomar los valores:
- float: left. Flotará a la izquierda del todo, o a la izquierda del elemento anterior con esa misma propiedad.
- float: right. Flotará a la derecha del todo, o a la derecha del elemento anterior con esa misma propiedad.
- float: none. No flotará.
El inconveniente de float es que los elemento también pierden su altura automática, de modo que otros elementos podrían quedar por debajo de éste (o por encima, en función de su propiedad z-index). Por tanto, es necesario definir la altura de los elementos con la propiedad height.
En el siguiente ejemplo se detallan y explican todas las posibilidades relativas a display y float.
Partiremos de un documento HTML sencillo con cajas numeradas de colores parecido al del ejemplo anterior y que nos servirán de base para definir las propiedades:
041-layout-css.html
A partir de aquí, definimos un CSS que nos permitirá probar las distintas posibilidades dentro de un archivo css/style.css:
042-layout-css.css
En ESTE ENLACE puedes comprobar y analizar el resultado. Prueba a ir comentando las diferentes secciones HTML o CSS para una mejor visualización.
La propiedad display (flex)
El uso de Flexbox para posicionar los elementos ha cobrado especial importancia en los últimos años debido a la necesidad de crear sitio webs adaptables a diferentes dispositivos, tales como portátiles, tablets o móviles, y por ser una de las bases de la estructura utilizada por conocidos frameworks o librerías de frontend como Tailwind o Bootstrap, entre otras.
Todas las propiedades y opciones disponibles las puedes encontrar en el enlace Flexbox W3 Schools.
No obstante y continuando con la metodología anterior, vamos a mostrar un ejemplo práctico que demuestre y sirva de guía para las diferentes opciones que nos da el uso de flex.
Partiremos de un documento HTML sencillo con cajas numeradas de colores parecido al del ejemplo anterior y que nos servirán de base para definir las propiedades:
043-layout-css.html
A partir de aquí, definimos un CSS que nos permitirá probar las distintas posibilidades dentro de un archivo css/style.css:
044-layout-css.css
En ESTE ENLACE puedes comprobar y analizar el resultado. Prueba a ir comentando las diferentes secciones HTML o CSS para una mejor visualización.
Se recomienda además utilizar la sección Layout del Inspector web del navegador para analizar más en detalle la estructura.
La propiedad display (grid)
El uso de grid para posicionar los elementos es la otra opción elegida actualmente cuando queremos realizar sitios webs multidispositivo.
Permite dividir una página en áreas o regiones principales y definir la relación en términos de tamaño, posición y capas, así como trabajar en forma de filas y columnas, tal y como hacíamos con las tablas, pero de una forma mucho más versátil y precisa.
De forma conceptual, podríamos decir que Flexbox se creó para trabajar en una sola dimensión (una fila o una columna) mientras que Grid se creó para poder trabajar en bidimensional, esto es, con varias filas y columnas simultáneamente.
Todas las propiedades y ocpiones disponibles las puedes encontrar en el enlace CSS Grid Layout MDN.
Y de nuevo, al igual que en el caso anterior, vamos a mostrar un ejemplo práctico que demuestre y sirva de guía para las opciones más comunes que nos da el uso de grid.
Partiremos de un documento HTML sencillo con cajas numeradas de colores que nos servirán de base para definir las propiedades:
045-layout-css.html
A partir de aquí, definimos un CSS que nos permitirá probar las distintas posibilidades dentro de un archivo css/style.css:
046-layout-css.css
En ESTE ENLACE puedes comprobar y analizar el resultado. Prueba a ir comentando las diferentes secciones HTML o CSS para una mejor visualización.
Además, igual que en el caso de Flexbox, puedes utilizar la sección Layout del Inspector web del navegador para analizar más en detalle la estructura.
Publicado el 21 de Noviembre de 2024
maquetacionwebresponsive flexboxgridangularmaterialmedia queries