Una propiedad muy importante de CSS es position. Con ella, podemos estructurar nuestro sitio web, aunque según mi perspectiva prefiero utilizar float y display para lograr lo mismo. Enfin, cosa de gustos. Algunas veces eso sí se me ha hecho necesario utilizar position para manejar la posición de un elemento por sobre otro, o respecto a mi ventana.

La propiedad position ubica un elemento en varios estados: static, relative, absolute o fixed. Detallemos:

Static: es por defecto en las etiquetas. Un elemento con position: static; siempre tiene la posición normal con que fluye a diagramación de la página.
Relative: un elemento con position: relative; se mueve con respecto a su posición normal. Al definirlo, podemos posicionarlo top: 20px; respecto a su posición actual.
Absolute: una etiqueta con position: absolute; es posicionado respectivamente a su contenedor bloque, sea éste el DIV padre, o el BODY. Su posición también es especificada por top, right, bottom, left.
Fixed: un elemento con position: fixed; queda fijo respectivo a la ventana del browser, no importanto el movimiento de éste o del scroll que produzca. Obedece también a top, right, bottom y left.

¿Se fijaron que para position no se ocupa margin-top, o margin-left? Sólo para que lo tengan en cuenta. Ahora, tal como quedó plasmado en el título de este artículo, en este caso mencionaré específicamente la propriedad position: absolute. Esta propiedad es muy útil si quieres ubicar elementos por sobre otros, no importando donde éstos estén ubicados. En esta ocasión, 2 ejemplos gráficos. Comenzaremos con el HTML base que regirá ambos ejemplos:

Título

Lorem ipsum dolor sit amet,…….

Curabitur at sem. Vestibulum vel diam. Proin quis sapien ut leo faucibus eleifend. Phasellus eros. Praesent ac diam….

Nada de otro mundo. Un contenedor que tiene un título, y dos párrafos de texto en sus respectivas etiquetas, para finalmente mostrar una imagen. Ahora, a través del CSS, esta página se verá un poco mejor estéticamente. La idea como mencioné es mostrar a través de 2 ejemplos las combinaciones que permiten posicionar en este caso a la imagen respecto a la ventana del browser, y a su etiqueta contenedora.

#contenido {
     width: 450px;
     float: left;
}
     #contenido h1 {
          text-align: center;
          color: #F00;
     }
     #contenido p {
          padding: 10px 10px 10px 15px;
          font-size: 12px;
          line-height: 140%;
     }
     #contenido img {
          position: absolute;
          width: 230px;
          height: 100px;
          top: 0;
          right: 0;
     }

Como se habrá notado, sólo se definió en la etiqueta IMG que ésta estuviera posicionada absolutamente, arriba y a la derecha (top: 0; right: 0;). Con esto, verán que la imagen estará ubicada en la parte superior derecha de nuestra ventana de browser, y se moverá respecto a su resolución.

Ver ejemplo

Ahora, agregaremos un position: relative al contenedor. Con esto, verán que la imagen nuevamente estará posicionada sobre nuestros elementos, pero en esta ocasión respecto a su contenedor bloque. Con esta propiedad declarada, definimos que div#contenido es su elemento bloque contenedor, y por lo tanto que sujete a IMG dentro de sí.

#contenido {
     width: 450px;
     float: left;
     position: relative;
}
     #contenido h1 {
          text-align: center;
          color: #F00;
     }
     #contenido p {
          padding: 10px 10px 10px 15px;
          font-size: 12px;
          line-height: 140%;
     }
     #contenido img {
          position: absolute;
          width: 230px;
          height: 100px;
          top: 0;
          right: 0;
     }

Ver ejemplo relativo

Links:

Absolutamente sí

Título