comparte el articulo 

Maquetación de páginas web: posición de las capas (primera parte)

Actualizado el 21/04/2010 < > 5 Cometarios

Resumen: Las capas que componen una web deben posicionarse 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.

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>
Este es un texto de ejemplo.
<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:

Posicionamiento estático

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

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).

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.

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: relavite;
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;
}

Posición relativa

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:

Posición absoluta

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.

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.

Posición fija

Conclusión

Hemos visto en este artículo, los fundamentos básicos del posicionamiento de capas. Sin embargo, existen otros elementos que deberemos tener en cuenta a la hora de posicionar las capas, como el comportamiento de las mismas cuando tienen diferentes valores de atributo “position” y las diferentes formas de superposición de capas, lo que detallaremos en la segunda parte de este tema.

Publicado el 21/04/2010, última actualización 21/04/2010.

Autor: Andrés Fernández

URL:

Añadir Comentario (Subir al texto)

5 Cometarios

  1. Maquetación de páginas web: posición de las capas (segunda parte)

    […] como dijimos en la primera parte, avanzaremos en los temas de posicionamiento de capas (puede aplicarse a todos los elementos, como […]

    Viernes, 7 de mayo 2010

  2. Carlos

    De lo que había estado consultando esta es la mejor explicación

    Jueves, 2 de septiembre 2010

  3. Daniel Perez

    Muy bueno este articulo y muchos de aqui te felicito por la pagina esta verdaderamente muy entendible. gracias…

    Sábado, 22 de octubre 2011

  4. Ibra

    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.

    Sábado, 6 de julio 2013

  5. Verónica

    Lbra acabamos de corregir el error. Muchas gracias por el aviso ;)

    Miércoles, 18 de septiembre 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras