iMeil NewsLetter - Marketing global

Posicionamiento absoluto y relativo

GregPor: Greg Alvarez
iMeil.com.mx
Octubre 19, 2010

Compártelo:   Comparte en Facebook Comparte en Twitter Comparte en LinkedIn

Posicionamiento absoluto y relativo El posicionamiento relativo y absoluto de elementos HTML, dentro de las páginas web, requiere de conocer en qué momento y de qué forma influyen éstos en la alineación que aplicamos a los contenidos.

Relativo y absoluto son declaraciones que deben ser definidas al momento de estructurar nuestras páginas web. A continuación veremos unos ejemplos para conocer directamente la forma en que uno y otro apoyan en la distribución de nuestros contenidos.

Posicionamiento relativo

El posicionamiento relativo, normalmente, se aplica a los DIVs que funcionarán como contenedor. De esta forma, todos los elementos HTML que sean incluídos dentro de este tipo de DIV, se alinearán en forma relativa con el DIV "padre" o "madre".

El DIV que suele llamarse "contenedor" es ejemplo de un DIV "padre" o "madre" porque incluye todos los contenidos de la página... aunque en ocasiones algunos quedan fuera para posicionarles en formas específicas (como el pie de página o una columna lateral).

Por tanto, un posicionamiento relativo siempre implica que se encuentra del elemento "padre". Nunca estará fuera de éste. Observa el código siguiente:

<div id="contenedor">
  <div id="top">
      <span class="logos"></span>
  </div>
  <div id="izquierda">
      <span class="menu">
        menu 1<br />
        menu 2<br />
        menu 3<br />
        menu 4<br /></span>
  </div>
  <div id="contenidos">
      <span class="conteni2">Contenidos</span>
  </div>
  <div id="derecha">
      <span class="conDerecha">Columna derecha</span>
  </div>
  <div id="pie">
      <span class="pieContenido">Pie de página</span>
  </div>
</div>
El código anterior presenta la estructura de los contenidos de una página. El DIV llamado "contenedor" incluye a todos, tanto las columnas izquierda y derecha, como la sección de los contenidos.

Si a este DIV "contenedor" no le especificamos su posicionamiento, el resto de los elementos DIV podrían distribuirse a nuestro antojo. Por ejemplo, si al DIV "derecha" le asignamos un posicionamiento absoluto, éste se presentará en la parte superior izquierda de la página, sin importarle la posición de los demás DIV, se "amontonorá" con los contenidos que ahí se encuentran ubicados y deberemos asignarle su lugar a través de definir el margen superior y a la izquierda que le permitirán una ubicación correcta. Es decir, será libre de colocar donde sea.

Pero si al DIV "contenedor" le asignamos un posicionamiento relativo, el DIV "derecha" sólo podrá ubicarse dentro de los límites de este "contenedor" y no más allá.

Posicionamiento absoluto

Entonces, es fácil comprender que con el posicionamiento absoluto podemos ubicar más fácilmente nuestros contenidos, ¿cierto? Sí, es cierto, pero el problema, de hacerlo a través de posicionamiento absoluto en forma completa, se presenta al momento en que nuestros contenidos son visualizados en diferentes resoluciones de pantalla.

Es decir, no es lo mismo que les vean en una resolución 1024x768 que una 1900x1200, y mucho menos verle en esas pantallitas de los telefonos inteligentes y celulares.

Ya, ya, no me crees. Veámoslo con un ejemplo. Observa el siguiente código:

<div id="top">
      <span class="logos"></span>
</div>
<div id="izquierda">
      <span class="menu">
        menu 1<br />
        menu 2<br />
        menu 3<br />
        menu 4<br /></span>
</div>
<div id="contenidos">
      <span class="conteni2">Contenidos</span>
</div>
<div id="derecha">
      <span class="conDerecha">Columna derecha</span>
</div>
<div id="pie">
      <span class="pieContenido">Pie de página</span>
</div>
Como podrás darte cuenta, el "contenedor" no se incluye. A cada elemento aplica un posicionamiento absoluto y distribúyelos dentro de la página utilizando codificación CSS para margen y altura. Algo como lo siguiente:

#top {
position:absolute;
margin:20px;
padding:4px;
width:850px;
height:120px;
border:1px solid #ccc;
}
Notarás que el elemento se ubica 20 pixeles alejado de la parte superior e izquierda y presenta anchura y altura de 850 y 120 pixeles, respectivamente. Si modificas margin y asignas algo como 50px 0 0 150px;, observarás cómo se desplaza su ubicación.

Este tipo de movimientos se pueden realizar a través de asignar una posición absoluta al elemento en cuestión. Si no se incluye entre un DIV que funcione como contenedor, su mobilidad es totalmente libre, pero si se encuentra dentro de un DIV contenedor, se encontrará limitado a las dimensiones del contenedor.

Realiza pruebas con el código que se presenta en diferentes resoluciones de pantalla. Basta con que reduzcas el tamaño de la ventana de tu navegador para comprobar la forma en que el posicionamiento absoluto se comporta ante las diferentes resoluciones de pantalla.

Recuerda: sólo realizando pruebas se puede lograr innovar y conocer más a fondo las cosas.

Lee lo que se opina sobre el tema

Comentario:
Nombre*:
E-mail*: