Ediciones ENI Editorial | líder en informática
La maquetación con cajas
Objetivos
La maquetación de sitios web con cajas fue el primer gran avance de las CSS 2.1. Aunque los módulos Flexbox y Grid permiten obtener diseños muy elaborados, las técnicas «clásicas» con CSS siguen siendo válidas, incluso hoy en día.
El posicionamiento de las cajas
1. Las posiciones de las cajas
El posicionamiento de las cajas formaba parte integrante de las CSS 2.1: https://www.w3.org/TR/CSS2/visuren.html#propdef-position
Actualmente, el W3C está trabajando en el módulo específico Positioned Layout Module Level 3, que todavía se encuentra en fase Working Draft al 11 de marzo de 2025: https://www.w3.org/TR/css-position-3/. Se trata, por lo tanto, de un módulo que no está listo para la producción y que solo se puede utilizar para pruebas locales.
La propiedad position de CSS 2.1 acepta varios valores:
-
static es la posición estándar y predeterminada de todas las cajas que aparecen en el flujo normal de la página dentro la ventana del navegador.
-
relative permite colocar un elemento en relación con otro. Este posicionamiento también se realiza en el flujo normal de la página.
-
absolute implica que el elemento en cuestión sale del flujo normal de la página y se muestra por encima de ese flujo. Su posición se determina en relación con el elemento padre, que puede ser la ventana del navegador.
-
fixed da el mismo resultado que el posicionamiento absoluto, con la diferencia de que el elemento permanece fijo en la ventana del navegador cuando el usuario se desplaza por la página.
El posicionamiento de los elementos HTML en cuestión se realiza con las siguientes propiedades:
-
top: posición con respecto al borde superior del elemento.
-
right: posición con respecto al borde derecho del elemento.
-
bottom: posición con respecto al borde inferior del elemento.
-
left: posición con respecto al borde izquierdo del elemento.
Se pueden utilizar valores numéricos positivos o negativos.
2. La posición relativa
La posición relativa se establece con respecto a la posición normal...
Las cajas flotantes
1. El ajuste del texto alrededor de las imágenes
El objetivo del uso de cajas flotantes es permitir que el texto se ajuste alrededor de una imagen.
Para ello, se usa la propiedad float, que acepta estos valores:
-
left: el elemento se coloca a la izquierda dentro de su elemento padre y los elementos siguientes lo rodean por la derecha.
-
right: el elemento se coloca a su derecha dentro de su elemento padre y los elementos siguientes lo rodean por la izquierda.
He aquí un ejemplo simple:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
#hipopotamo img {
float: left;
margin-right: 20px;
}
#tigre img {
...Las cajas superpuestas
Con el posicionamiento absoluto, las cajas se superponen según el orden en que se declaran en el código. He aquí un ejemplo sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
#uno, #dos, #tres {
position: absolute;
border: 1px solid #000;
background-color: #eee;
width: 400px;
}
#uno {
left: 40px;
top: 40px;
}
#dos {
left: 80px;
top: 80px;
}
#tres {
left: 120px;
top: 120px;
}
</style>
</head>
<body>
<div id="uno">
Vestibulum id ligula porta felis euismod...El desbordamiento de las cajas
En una maquetación, puede haber ocasiones en las que el contenido sea más importante que el contenedor. Por ejemplo, es posible que una caja tenga una altura fija y contenga mucho más texto del que puede mostrar. La propiedad overflow permite decidir qué hacer con el texto que sobrepasa el contenedor. Estos son los valores posibles:
-
hidden: el contenido sobrante se oculta, sin posibilidad de visualizar el texto desbordado.
-
visible: el contenido sobrante se muestra, ignorando las restricciones de altura fija del elemento padre.
-
scroll: aparece una barra de desplazamiento para ver el texto desbordado.
He aquí un ejemplo con estas tres posibilidades:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
#uno, #dos, #tres {
border: 1px solid #000;
width: 400px;
height: 150px;
...La visibilidad de las cajas
La propiedad visibility permite ocultar una caja con el valor hidden y mostrarla con el valor visible. Preste atención: cuando un elemento se oculta con el valor hidden, simplemente no se muestra, pero el espacio que ocuparía sigue reservándose en la ventana del navegador. En cambio, con la propiedad display: none, no solo se oculta el elemento, sino que también se elimina completamente de la página, sin conservar el espacio que ocuparía su visualización. Por lo tanto, no hay que confundir el uso de estas dos propiedades.
He aquí un ejemplo sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
#oculto {
visibility: hidden;
}
</style>
</head>
<body>
<p>Pellentesque ornare sem lacinia...</p>
<p id="oculto">Pellentesque ornare sem lacinia...</p>
<p>Pellentesque ornare sem lacinia...</p>
</body>
</html> Y esta es la pantalla...