¿Cuál es la posición: relativa útil para?

Question

Estaba pensando en modos de posicionamiento de CSS hoy y me di cuenta de que nunca uso position:relative para nada más que hacer que position:absolute trabaje en elementos secundarios.

Soy más un "desarrollador" que un "diseñador", pero a lo largo de los años he hecho bastantes diseños basados ​​en CSS. He usado tablas, flotante, márgenes (positivos y negativos), posición: absoluta, e incluso posición: fija, pero no creo que alguna vez haya tenido una ocasión en la que haya usado la posición: relativa para realmente posicionar una elemento.

¿Existe alguna gran técnica de CSS-gurú que se base en la posición: relativa (y se usa en diseños del mundo real)? ¿Me estoy perdiendo?

Answer 1

Es útil si desea compensar un elemento sin moverse con los márgenes y sus consecuencias para otros elementos. Digamos que desea intencionalmente sacar una imagen del lateral de un contenedor y (casi) solapar con algún contenido en un contenedor al lado.

------------- ----- 
|   | | | 
| X -------| Y | 
|  | a || | 
|  -------| | 
------------- ----- 

Container a es parte del flujo de texto normal de X y desea que siga siendo así, lo que desea es que sobresalía de la cara un poco como un puro efecto. Si haces eso con los márgenes, puede ser realmente complicado y refluir algunos de tus otros contenidos.
Al usar position: relative; left: 10px; puede obtener ese efecto fácilmente sin los efectos secundarios.

Answer 2

lo he usado más de una vez para mostrar cosas como imágenes de cabecera, algo así como:

<div id="header"> 
    <div id="logo"></div> 
<div> 

CSS:

#header { width: 1024px; margin: 0 auto; background: url(string.jpg); } 
#logo { position: relative; left: 40px; background: url(logo.jpg); } 

En este caso, la cabecera tiene una gran franja de todo el camino a través de una imagen de fondo, el logotipo se encuentra en la franja de compensar un poco. Más simple que el relleno/margen en algunos casos para cambiar las cosas un poco, creo, tal vez es solo opinión.

Answer 3

Lo uso principalmente cuando quiero colocar algún elemento absoluto relativo a su elemento principal. En ese caso, el elemento padre debe establecerse en position: relative. Ahí es donde está.

Además, también lo uso aquí y allá para arreglar errores IE6/7 haslayout/parpadeantes en elementos de bloque con una imagen de fondo.

Answer 4

He usado posotion: relative en el pasado para un elemento contenedor, con elementos absolutamente posicionados dentro de él (como un diseño centrado de tres columnas). Por ejemplo:

alt text http://www.freeimagehosting.net/uploads/2573654d07.png

que no dan el contenedor cualquier desplazamiento, pero posicionándola con position: relative me permite colocar de manera absoluta las columnas con respecto al recipiente. Si el contenedor está configurado en position: static, como lo está de forma predeterminada, entonces las columnas estarán absolutamente posicionadas en relación con la ventana del navegador, no el contenedor.

Answer 5

Uso position:relative; para que los caracteres superíndices aún puedan ascender por encima de vertical-align: top; pero no les permite meterse con el principio de mis párrafos.

sup { 
    font-size: .7em; 
    vertical-align: top; 
    position: relative; 
    top: -.1em; 
}