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

Actualizado el 07/05/2010 < > 4 Cometarios

Resúmen: Las capas se posicionan de diferentes formas según donde se encuentren ubicadas en el HTML y al valor que se le de al atributo "position".

Meneame Bitacoras

Tal como dijimos en la primera parte, avanzaremos en los temas de posicionamiento de capas (puede aplicarse a todos los elementos, como imágenes, párrafos, etc.), sobre todo en lo que respecta a la posición que adquieren las capas dependiendo del flujo del documento. A continuación, haremos un breve repaso del concepto de la propiedad “position” y sus diferentes valores:

  1. 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.
  2. 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.
  3. 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.
  4. 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.

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:

Posicionamiento de capas

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

  1. La capa 3 respetará el flujo del documento y la posición de la capa 1.
  2. 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.

  1. 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.
  2. 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.

  1. Como puede verse, la capa 2 ignora la posición de la capa 1 y se posiciona en referencia al elemento body.
  2. 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.

  1. Como puede apreciarse, la capa 2 ignora la posición de la capa 1 y se posiciona respecto del elemento body.
  2. 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, 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.

Meneame Bitacoras

Publicado el 07/05/2010, última actualización 07/05/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

4 Cometarios

  1. Como editar y crear propiedades CSS con Adobe Dreamweaver

    [...] una nueva capa, que será el inicio de un menú sencillo. Haremos un menú horizontal debajo de la cabecera. Para [...]

    Viernes, 4 de junio 2010

  2. Herramientas de maquetación web de Adobe Dreamweaver CS4

    [...] a facilitar la tarea de maquetación, tanto para los elementos creados mediante la utilización de capas (divs) como para maquetar tablas y [...]

    Lunes, 28 de junio 2010

  3. Utilización de la repetición y posición de fondos en la maquetación de páginas web

    [...] de fondo puede ser empleada en muchos casos como forma de dar una apariencia determinada a algunas capas. Con mucha frecuencia se emplea en la creación de botones de menús, encabezados, ubicación de [...]

    Viernes, 2 de julio 2010

  4. Agustín Pérez García

    Grácias de antemano, es dificil encontrar calidad y claridad juntos.

    Dices que el 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!

    Lunes, 2 de mayo 2011

(Subir al texto)

Añadir Comentario

* Campos obligatorios