Posición de capas con CSS en la maquetación de páginas web
(4 votos, promedio: 3,75 de 5)
Cargando...Profundizamos en los temas de posicionamiento de capas para que el diseño adquiera el formato deseado. Para ello se emplean atributos CSS, que permiten ubicar las capas en el lugar y en la forma deseada.
Para que el diseño adquiera el formato deseado, se emplean atributos CSS, que permiten ubicar las capas en el lugar y en la forma deseada.
El presente trabajo pretende mostrar como se posicionan las capas empleando HTML y CSS. Para poder comprender la totalidad de los conceptos que se verterán, es necesario que se acompañe la lectura del mismo con la aplicación de los procedimientos prácticos descritos.
Para ello, necesitarán crear dos archivos, para lo que pueden emplear editores de texto plano (para los usuarios de Windows, Notepad o Block de Notas; también sirve Wordpad), editores de texto especializados en lenguajes web (los editores de texto empleados en las diferentes distribuciones de Linux son generalmente de este tipo; para Windows, es posible descargar Notepad++ en forma gratuita) o editores WYSIWYG, como Adobe Dreamweaver.
En todos los casos, el procedimiento será el mismo, por los que los que empleen Dreamweaver deberán trabajar exclusivamente en la ventana de código.
Para los ejemplos que veremos, crearemos un documento XHTML 1.1, escribiendo el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Página de ejemplo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
</body>
</html>
Ahora guardaremos el archivo llamándolo “ejemplo.html”. A continuación, deberemos crear el archivo CSS, empleando el mismo procedimiento, solo que este archivo, por ahora, lo dejaremos en blanco, lo llamaremos “estilo.css” y lo guardaremos en la misma carpeta en que se ha guardado el HTML.
Conceptos generales
Cuando se crean capas o se colocan elementos (texto, imágenes, etc.) sin definir su posicionamiento, estas siguen el orden del flujo del documento y se colocan uno debajo del otro. Veamos esto con un ejemplo.
En el archivo HTML, entre las etiquetas <body> y </body>, colocaremos el siguiente código, con el que estaremos creando tres capas y una línea de texto. La capa 3 se encuentra anidada dentro de la capa 2.
<div id="capa1"></div>
<p>Este es un texto de ejemplo.</p>
<div id="capa2">
<div id="capa3"></div>
</div>
Luego, en el archivo CSS, le daremos valor a algunos atributos de las capas creadas, de forma tal que sean visibles. Para ello, escribiremos el siguiente código en el archivo CSS:
#capa1 {
width: 400px;
height: 100px;
border: solid 5px #f00;
}
#capa2 {
width: 400px;
height: 100px;
border: solid 10px #00f;
}
#capa3 {
width: 200px;
height: 50px;
border: solid 5px #06f;
}
El resultado lo vemos en la siguiente captura de pantalla:
En la imagen podemos apreciar que las capas se ubican en la misma disposición que se encuentran en el código HTML, lo que es igual a decir que siguen el flujo del documento.
Tipos de posicionamiento de capas
Para determinar el tipo de posicionamiento que tendrán las capas y cualquier otro elemento, se emplea el atributo “position”, que puede tener únicamente cuatro valores: “static”, “relative”, “absolute” y “fixed”.
Al colocar alguno de estos valores, las capas se posicionarán en forma diferente.
Una vez determinado el tipo de posicionamiento del elemento, se puede establecer la misma empleando los atributos de posición, que son “top”, “left”, “right” y “bottom” (arriba, izquierda, derecha y abajo, respectivamente).
Estos atributos son los que fijan la distancia a la que se posiciona el elemento, y se le debe dar valores en cualquier unidad de medida soportada por CSS, aunque las más usuales son el punto (pt), el pixel (px), porcentajes (%) y la altura de la fuente del elemento (em).
Position Static
Este valor del atributo “position” es el que tienen todos los elementos por defecto, por lo que cuando no se determina el mismo, es equivalente a darle el valor “static”.
En este caso, las propiedades de posicionamiento “top”, “left”, “right” y “bottom” no tendrán efecto. Veámoslo en el ejemplo. A los identificadores “capa1”, “capa2” y “capa3”, les daremos el valor “static” y estableceremos valores a las propiedades de posicionamiento:
#capa1 {
width: 400px;
height: 100px;
border: solid 5px #f0f;
position: static;
top: 10px;
left: 10px;
}
#capa2 {
width: 400px;
height: 100px;
border: solid 10px #00f;
position: static;
top: 10px;
left: 10px;
}
#capa3 {
width: 200px;
height: 50px;
border: solid 5px #f60;
position: static;
top: 10px;
left: 10px;
}
Guardaremos el archivo CSS tras modificarlo, iremos al navegador donde hemos abierto el documento HTML y recargaremos la página.
Como podrán ver, la página de ejemplo se seguirá viendo exactamente en la misma forma, aún cuando modifiquemos los dos valores de posicionamiento empleados en cualquiera de las capas.
Position Relative
El valor “relative” hace que los elementos se comporten en la misma forma que cuando tienen el valor “static”, es decir, que seguirán el flujo del documento, pero a diferencia de éste, los elementos internos podrán recibir los valores de posicionamiento para las propiedades “top”, “left”, “right” y “bottom”, posicionándose a la distancia establecida del elemento anterior o del borde del elemento padre.
Nota: Se llama elemento padre a aquel en el cual el elemento se encuentra anidado. En el ejemplo que estamos llevando adelante, el elemento padre de la capa 1 el body, mientras que el elemento padre de la capa 3 es la capa 2.
Para ver esto en el ejemplo, estableceremos cambios en el archivo CSS, el cual quedará de la siguiente forma y se verá igual que en la imagen que le sigue:
#capa1 {
width: 400px;
height: 100px;
border: solid 5px #f0f;
position: relative;
top: 10px;
left: 10px;
}
#capa2 {
width: 400px;
height: 100px;
border: solid 10px #00f;
position: relative;
top: 30px;
left: 30px;
}
#capa3 {
width: 200px;
height: 50px;
border: solid 5px #f60;
position: relative;
top: 10px;
left: 10px;
}
Position Absolute
El valor “absolute” hace que los elementos se posicionen de acuerdo a la distancia absoluta determinada por las propiedades “top”, “left”, “right” o “bottom”, sin tener en cuenta el flujo del documento.
Siempre las distancias establecidas son respecto del elemento padre y no relativas a otros elementos. Siguiendo con el ejemplo, cambiaremos el valor del atributo position de la capa 2:
#capa1 {
width: 400px;
height: 100px;
border: solid 5px #f0f;
position: relavite;
top: 10px;
left: 10px;
}
#capa2 {
width: 400px;
height: 100px;
border: solid 10px #00f;
position: absolute;
top: 30px;
left: 30px;
}
#capa3 {
width: 200px;
height: 50px;
border: solid 5px #f60;
position: relative;
top: 10px;
left: 10px;
}
Ahora, al recargar la página en el navegador, veremos que la página se verá de la siguiente manera:
Como puede apreciarse, la capa 2 se sale del flujo del documento y se establece en la posición determinada por los valores de posicionamiento respecto del elemento padre, el que en este caso es el body. Como resultado, la capa 2 se superpone a la capa 1 y al texto.
El orden de la superposición de capas, aun cuando se empleen diferentes tipos de posicionamiento para ellas, es el mismo que tiene el flujo del documento.
Position Fixed
El valor “fixed” de la propiedad “position” hace que el elemento se comporte en forma igual a que si se le diera el valor “absolute”, solo que en lugar de fijar la distancia respecto del elemento padre, toma las distancias desde el borde de la ventana del navegador.
Al igual que cuando se determina el valor “absolute”, el elemento sale del flujo del documento. Si la página es más ancha o larga que la ventana del navegador y el usuario varía la posición de la misma empleando las barras de desplazamiento, el elemento cuya propiedad “position” tiene el valor “fixed” no modificará su posición y el usuario la verá siempre en el mismo punto de la ventana.
Para ejemplificar esto, debemos hacer que alguna de las capas tenga dimensiones mayores que la de la ventana del navegador.
Para el ejemplo, hemos modificado la altura de la capa 2, y le hemos dado valor “fixed” a la propiedad “position” de la capa 3, quedando el código CSS de la siguiente forma:
#capa1 {
width: 400px;
height: 100px;
border: solid 5px #f0f;
position: relavite;
top: 10px;
left: 10px;
}
#capa2 {
width: 400px;
height: 1500px;
border: solid 10px #00f;
position: absolute;
top: 30px;
left: 30px;
}
#capa3 {
width: 200px;
height: 50px;
border: solid 5px #f60;
position: fixed;
top: 10px;
left: 10px;
}
En la siguiente imagen podremos apreciar como se verán las capas, tanto en la parte superior de la página como en la inferior, a la que deberemos ir empleando la barra de desplazamiento vertical.
Durante el desplazamiento en uno u otro sentido, podremos ver que la capa 3 mantendrá su posición respecto de la ventana del navegador.
Repaso a los diferentes valores de position
A continuación, haremos un breve repaso del concepto de la propiedad “position” y sus diferentes valores:
- Posición estática (position: static) – Es el valor que adquiere un elemento por defecto. Cuando un elemento está afectado por este valor de la propiedad position, este elemento se posiciona siguiendo el flujo del documento y sin obedecer las directivas de las propiedades left, top, right ni bottom.
- Posición absoluta (position: absolute) – Este valor hace que el elemento afectado no dependa para su posicionamiento del flujo del documento, por lo que, entre otras cosas, puede superponerse a otros elementos. Un elemento posicionado en forma absoluta también es afectado por las propiedades left, bottom, right y top. Si el elemento con posición absoluta no está contenido dentro de otro elemento, se posiciona respecto del elemento body. En caso contrario, su posición es referida al elemento padre.
- Posición relativa (position: relative) – Es una derivación de la posición estática. Tal como la nombrada, obedece al flujo del documento, pero en este caso obedece a las propiedades de posicionamiento left, bottom, right y top. Esto quiere decir que su posición queda definida con la distancia marcada por estas propiedades respecto del final del elemento precedente en el documento.
- Posición fija (position: fixed) – Es una derivación de la posición absoluta. Tal como los elementos con posición absoluta, los elementos posicionados en forma fija no siguen el flujo del documento. Su posición es referida a la ventana del navegador y no a ningún elemento del documento, por lo que cuando la ventana se desplaza por el documento, estos elementos se mantienen en la misma posición respecto de los bordes de la ventana.
Relación entre capas posicionadas de distintas formas
Salvo los elementos posicionados en forma fija, el resto de los posicionamientos están afectados por el posicionamiento de otros elementos o por su posición en el flujo del documento.
También difieren respecto de su relación con los elementos padres e hijos. A continuación haremos referencia a este tipo de relación entre los elementos posicionados.
Para que puedan comprender como se comportan los elementos afectados por la propiedad position, crearemos un documento HTML de ejemplo con un archivo CSS.
El documento HTML constará en tres capas de diferentes colores. En el archivo CSS, podrán modificar los atributos de las propiedades para que puedan experimentar los cambios de posicionamiento y el comportamiento de las capas.
El ejemplo lo haremos con capas, pero también puede realizarse con otros tipos de elementos, como por ejemplo párrafos, imágenes, etc.
Documento HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >
<head>
<meta name="title" content="Página de ejemplo" />
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="capa1"></div>
<div id="capa2">
<div id="capa3"></div>
</div>
</body>
</html>
Documento CSS:
body {
margin: 0;
padding: 0;
background: #000;
}
#capa1 {
width: 300px;
height: 200px;
position: static;
top: 60px;
left: 40px;
background: #f60;
}
#capa2 {
width: 260px;
height: 400px;
position: static;
top: 40px;
left: 20px;
background: #06f;
}
#capa3 {
width: 100px;
height: 100px;
position: static;
top: 110px;
left: 210px;
background: #fff;
}
Luego abriremos el documento HTML en nuestro navegador e iremos cambiando los valores de acuerdo a como vayamos desarrollando el tema.
En pantalla deberá aparecer lo mismo (más grande) que lo que se muestra en la primera ventana de la siguiente imagen, donde podrán ver cada uno de los ejemplos, sumado al que ya aparece en el código y que se refiere al caso de tres capas con posicionamiento estático, que aparece en la primera ventana:
1- Capa con posición absoluta dentro de una capa con posición estática. Cuando esto sucede, la capa con posición absoluta ignora al elemento padre y sus coordenadas de posición se fijan al elemento siguiente, en este caso, al elemento body. Para ver esto, modificaremos el valor de la propiedad “position” de la capa 3, al que daremos el valor “absolute”. Veremos que la capa 3 ignorará a la capa padre y a la capa 1, posicionándose respecto del elemento body. (ver segunda ventana de la imagen de ejemplo)
2- Capa con posición relativa en una capa con posición estática. Cambiando el valor de la posición de la capa 3 por “relative”, veremos lo siguiente (ver tercera ventana de la imagen de ejemplo):
- La capa 3 respetará el flujo del documento y la posición de la capa 1.
- La capa 3 se posicionará respecto del comienzo de la capa padre, en este caso, la capa 2.
3- Una capa con posición absoluta anidada en una capa con posición relativa. En este caso, modificaremos el valor static de la capa 2 para darle el valor relative, mientras que a la capa 3 le daremos posición absoluta. El resultado lo veremos en la cuarta ventana de la imagen de ejemplo.
- La capa 2, en este caso, no ignorará la presencia de la capa 1, ya que ambos valores (static y relative) respetan el orden del flujo del documento; de esta forma, la capa 2 fijará sus coordenadas de posición respecto del final de la capa 1.
- La capa 3 fijará su posición respecto del comienzo de su capa padre, en este caso, la capa 2, tal como es la característica de las capas con posición absoluta.
4- Una capa con posición absoluta anidada en otra capa con posición absoluta. Para ver esto, cambiaremos a “absolute” las capas 2 y 3. El resultado puede verse en la ventana cinco de la imagen de ejemplo.
- Como puede verse, la capa 2 ignora la posición de la capa 1 y se posiciona en referencia al elemento body.
- Mientras tanto, la capa 3 se posicionará en referencia al inicio de su capa padre.
5- Una capa estática anidada en una capa absoluta cuya capa precedente es una capa con posición relativa. Capa 1 con posición “relative”, capa 2 con posición “absolute”, capa 3 con posición “static”. El resultado puede verse en la sexta ventana de la imagen de ejemplo.
- Como puede apreciarse, la capa 2 ignora la posición de la capa 1 y se posiciona respecto del elemento body.
- La capa 3 se instala, tal como es característico de los elementos con posición estática, en el inicio de la capa contenedora, en este caso, la capa 2.
Existen infinidad de ejemplos diferentes, donde las capas se comportan en forma diferente de acuerdo al posicionamiento propio, el del contenedor y el de los elementos precedentes. Conocer estos conceptos muy bien, familiarizarse con el manejo del posicionamiento de elementos, es fundamental para poder maquetar una página web.
Muchas de las frustraciones de los principiantes radica en el desconocimiento de conceptos básicos del posicionamiento de capas, ya que no consiguen colocar cada elemento en el lugar que desean.
Un último concepto. Este tema ha sido tratado para el posicionamiento de elementos de bloque, en este caso capas. El posicionamiento de elementos de línea, como <span> y otros, tienen diferencias importantes respecto del posicionamiento de bloques.
10 respuestas
Gracias Ivan! bien visto. Era una errata, la he corregido.
Un saludo.
En la caja uno dice relavite en vez de relative.alguien se puede confundir.
Hola:
Creo que hay un error. EN uno de los ejemplos dices:
Una capa estática anidada en una capa absoluta cuya capa precedente es una capa con posición relativa. Capa 1 con posición “relative”, capa 2 con posición “absolute”, capa 3 con posición “static”. El resultado puede verse en la sexta ventana de la imagen de ejemplo.
Como puede apreciarse, la capa 2 ignora la posición de la capa 1 y se posiciona respecto del elemento body.
Y yo pregunto ¿Si la capa 2 es absoluta y la uno relativa, no debería posicionarse dentro del flujo de ésta y no en el de body?.
Un saludo y muy buen artículo.
Lbra acabamos de corregir el error. Muchas gracias por el aviso ;)
Hay una errata en el apartado fixed en la tercera línea:
“…Al igual que cuando se determina el valor “relative”, el elemento sale del flujo del documento…”
Sería “absolute” en lugar de “relative”
Estupendo documento, que tarde tan productiva estoy pasando, gracias.
El lugar donde se ubican las capas con posicion absoluta es afectada por la resolucion de pantalla?
Excelente articulo, muy claro y explícito, incluso para mí que no soy un programador profesional.
Solo una observación; me parece que el orden de las figuras 2 y 3 esta invertido. De acuerdo al flujo de tu redacción y, como no están numeradas las figuras, uno se confunde al principio y piensa que hay una contradicción entre lo que ve y lo que lee.
De todos modos sigue siendo un excelente artículo, al igual que los demás que vengo leyendo hasta ahora.
Muy bueno este articulo y muchos de aquí. Te felicito por la página, es verdaderamente muy entendible. Gracias.
Gracias de antemano, es dificil encontrar calidad y claridad juntos.
Dices que en la propiedad absoluta…
“Si el elemento con posición absoluta no está contenido dentro de otro elemento, se posiciona respecto del elemento body. En caso contrario, su posición es referida al elemento padre.”
Sin embargo en el ejemplo absoluta dentro de estática…
“Veremos que la capa 3 ignorará a la capa padre y a la capa 1, posicionándose respecto del elemento body. (ver segunda ventana de la imagen de ejemplo)”
¿En qué quedamos? ¿Ignora o por contra, se posiciona con respecto al padre? ¿Tal vez capa2 NO es el padre de capa3?
Gracias!
De lo que había estado consultando esta es la mejor explicación