"Position: absolute" y "Position: relative" en Blogger

Veamos la diferencia que hay entre los valores "relative" y "absolute" aplicados a la propiedad "position", para posicionar elementos dentro de un blog: Position: relative Como su nombre los indica (relativo) posiciona un elemento, dentro del blog, en relación con los demás elementos del mismo, respetando los parámetros indicados en la plantilla. Position: absolute Como su nombre lo indica (absoluto) posiciona un elemento, dentro del blog, de manera absoluta es decir, sin tener en cuenta relación alguna con los demás elementos del blog, fuera del contexto del mismo. Ejemplo Vamos a mover la cabecera (header) del blog, poniéndole márgenes superior e izquierdo de 50 pixeles cada uno. La posición original de la cabecera es ésta:

Para darle una posición relativa pegamos en la plantilla, dentro de la sección CSS correspondiente a la cabecera, el siguiente código: .header-outer {    margin-left: 50px;    margin-top: 50px;    position: relative; } La cabecera quedará así:

Como podemos observar la cabecera se desplaza posicionándose según los márgenes que le asignamos (izquierdo y superior), pero al mismo tiempo conserva el margen derecho, y los que tiene en relación con el cuerpo de las entradas y el gadget "Archivo del blog". Es de anotar que esta posición la adquiere la cabecera por defecto, es decir aunque se omita del código la línea position: relative; Para darle una posición absoluta utilizamos el mismo código anterior, pero cambiando el valor relative por el valor absolute. La cabecera quedará así:

La cabecera se desplaza según los márgenes que le asignamos pero sin tener en cuenta los demás parámetros: el margen derecho ni los que tenía en relación con el cuerpo de las entradas y con el gadget "Archivo del blog", saliéndose del contexto del mismo, como si estuviera sola. Se ajusta, además al ancho del título, que sí conserva, en relación con la cabecera, los márgenes asignados por defecto, ya que le dimos posición absoluta a la cabecera, nó al título. Obviamente que esta alternativa no es aplicable porque desconfigura el blog; se trata de explicar la diferencia entre "Position: absolute" y "Position relative": Si le ponemos a la cabecera un margen que supere al ancho del blog, con la posicion absoluta se saldrá del mismo. En el ejemplo le vamos a poner un margen izquierdo de 960 px utilizando este código: .header-outer {    margin-left: 960px;    position: absolute; } Así se verá la cabecera:

Y si le ponemos ese mismo margen, pero con la posición relativa, la cabecera no se verá, y desplazará el contenido del blog hacia abajo ya que las letras del título del blog formarán, una debajo de otra, una línea vertical. Twittear