2010-12-16 29 views
63

Puede alguien decirme la diferencia entre style = "position:absolute" y style = "position:relative" y cómo se diferencian en el caso añado a div/span/input elementos?Diferencia entre style = "position: absolute" y style = "position: relative"

Estoy usando absolute ahora, pero quiero explorar relative también. ¿Cómo cambiará esto el posicionamiento?

+1

[La propiedad 'posición'] (http://www.w3.org/TR/CSS21/visuren.html#propdef-position) en CSS 2.1. –

+0

@rolfl Hm, ¿esta edición fue realmente necesaria en una pregunta de 3 años? Lo habría llamado "demasiado pequeño". –

+2

@MrLister Apareció en una cola de revisión de 'edición sugerida' ... No noté la edad. Pero, si se tratara de una pregunta de 60 segundos de antigüedad, ¿hubiera marcado la diferencia? – rolfl

Respuesta

122

El posicionamiento absoluto significa que el elemento se saca completamente del flujo normal del diseño de la página. En lo que respecta al resto de los elementos en la página, el elemento absolutamente posicionado simplemente no existe. El elemento en sí se dibuja por separado, como "encima" de todo lo demás, en la posición que especifique utilizando los atributos left, right, top and bottom.

Utilizando la posición que especifique con estos atributos, el elemento se coloca en esa posición dentro de su último elemento ancestro que tiene un atributo de posición distinto de static (los elementos de la página predeterminados son estáticos cuando no se especifica ningún atributo de posición) o el cuerpo del documento (vista del navegador) si no existe tal antecesor.

Por ejemplo, si tuviera este código: 20px

<body> 
    <div style="position:absolute; left: 20px; top: 20px;"></div> 
</body> 

... la <div> se posicionaría desde la parte superior de la ventana del navegador, y 20 píxeles desde el borde izquierdo de la misma.

Sin embargo, si hice algo como esto:

<div id="outer" style="position:relative"> 
    <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div> 
</div> 

... 20px entonces el inner div se coloca desde la parte superior de la outer div, y 20 píxeles desde el borde izquierdo de la misma, debido a que la outer div no se coloca con position:static porque lo hemos configurado explícitamente para usar position:relative.

El posicionamiento relativo, por otro lado, es como no indicar ningún posicionamiento en absoluto, pero el left, right, top and bottom atributos "empuja" el elemento fuera de su diseño normal.El resto de los elementos en la página aún se distribuyen como si el elemento estuviera en su lugar normal.

Por ejemplo, si tuviera este código:

<span>Span1</span> 
<span>Span2</span> 
<span>Span3</span> 

... entonces los tres elementos <span> se sentaban uno al lado del otro sin solaparse.

Si fijo el segundo <span> a utilizar el posicionamiento relativo, como esto:

<span>Span1</span> 
<span style="position: relative; left: -5px;">Span2</span> 
<span>Span3</span> 

... entonces SPAN2 coincidiría en el lado derecho de la casilla de verificación Período1 por 5px. Span1 y Span3 se ubicarían exactamente en el mismo lugar que en el primer ejemplo, dejando un espacio de 5px entre el lado derecho de Span2 y el lado izquierdo de Span3.

Espero que aclare las cosas un poco.

+0

Awesome answer.Clarified. –

+0

@AgentConundrum Esta es una respuesta excelente, muy clara. ¡Gracias! –

+0

usted hace mi día. Gracias @Agent y ahora finalmente obtuve la solución clara sobre la posición absoluta :). –

2

posicionamiento absoluto se basa en co-ordiantes de la pantalla:

position:absolute; 
top:0px; 
left:0px; 

^coloca el elemento de la parte superior izquierda de la ventana.


posición relativa es relativa a donde se coloca el elemento:

position:relative; 
top:1px; 
left:1px; 

^coloca el elemento 1px hacia abajo y de 1 píxel desde la izquierda de donde originalmente se sentó :)

0

lugares absolutos el objeto (div, span, etc.) en una ubicación forzada absoluta (generalmente determinada en píxeles) y relativo lo colocará una cierta cantidad lejos de donde normalmente estaría su ubicación. Por ejemplo:

posición: relative; izquierda: -20px;

Podría hacer desaparecer el lado izquierdo del texto si estaba dentro de 20px al borde izquierdo de la pantalla.

13

Definitivamente querrá consultar this positioning article de A List Apart. Ayudé a desmitificar el posicionamiento de CSS (lo cual me pareció una locura, antes de este artículo).

4

Con el posicionamiento de CSS, puede colocar un elemento exactamente donde lo desee en su página.

Cuando va a utilizar el posicionamiento CSS, lo primero que debe hacer es usar la posición de propiedad CSS para indicarle al navegador si va a usar un posicionamiento absoluto o relativo.

Ambas posiciones tienen características diferentes. En Css Una vez que establezca Posición, podrá usar los atributos superior, derecho, inferior, izquierdo.

Absolute Position

Un elemento posición absoluta está posicionado con respecto al primer elemento principal que tiene una posición que no sea estática.

Posición relativa

Un elemento posicionado relativo se coloca en relación a su posición normal.

Para colocar un elemento de manera relativa, la posición de la propiedad se establece como relativa. La diferencia entre el posicionamiento absoluto y relativo es cómo se calcula la posición.

Más: Postion Relative vs Absolute

1

Cuando se va a utilizar el posicionamiento de CSS, la primera cosa que hay que hacer es usar la posición de propiedad CSS para decirle al navegador si usted va a utilizar el posicionamiento absoluto o relativo.

Ambas posiciones tienen características diferentes. En Css Una vez que establezca Posición, podrá usar los atributos superior, derecho, inferior, izquierdo.

Absolute Position

Un elemento de posición absoluta se posiciona con respecto al primer elemento principal que tiene una posición que no sea estática.

Posición relativa

Un elemento posicionado relativo se coloca en relación a su posición normal.

Para colocar un elemento de manera relativa, la posición de la propiedad se establece como relativa. La diferencia entre el posicionamiento absoluto y relativo es cómo se calcula la posición.

10

Posicionamiento relativo: El elemento crea sus propios ejes de coordenadas, en una ubicación desplazada del eje de coordenadas de la ventana gráfica. Es parte del flujo de documentos, pero se desplazó.

Posicionamiento absoluto: Un elemento busca los ejes de coordenadas disponibles más cercanos entre sus elementos principales. El elemento se posiciona luego al especificar desplazamientos desde este eje de coordenadas. Se eliminó del flujo normal del documento.

enter image description here

Source

0

OK, respuesta muy obvia aquí ... básicamente relativa posición es relativa al elemento o ventana anterior, mientras que absoluta no se preocupan por los demás elementos a menos que sea un padre si usa la parte superior e izquierda ...

Mire el ejemplo que creo para que usted muestre las diferencias ...

enter image description here

También puedes verlo en acción, utilizando el css puedo crear para usted, se puede ver cómo absoluta y posiciones relativas se comportan:

.parent { 
 
    display: inline-block; 
 
    width: 180px; 
 
    height: 160px; 
 
    border: 1px solid black; 
 
} 
 

 
.black { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 30px; 
 
    margin: 5px; 
 
    border: 1px solid black; 
 
} 
 

 
.red { 
 
    width: 100px; 
 
    height: 30px; 
 
    margin: 5px; 
 
    top: 16px; 
 
    background: red; 
 
    border: 1px solid red; 
 
} 
 

 
.red-1 { 
 
    position: relative; 
 
} 
 

 
.red-2 { 
 
    position: absolute; 
 
}
<div class="parent"> 
 
    <div class="black"> 
 
    </div> 
 
    <div class="red red-1"> 
 
    </div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="black"> 
 
    </div> 
 
    <div class="red red-2"> 
 
    </div> 
 
</div>

1

relativa:

  1. Un elemento con position: relative; es po sitioned en relación con su posición normal.

  2. Si no agrega atributos de posicionamiento (arriba, izquierda, abajo o derecha) en un elemento relativo, no tendrá ningún efecto en su posicionamiento. Se comportará exactamente como un elemento position: static.

  3. Pero si agrega algún otro atributo de posicionamiento, por ejemplo, arriba: 10px; cambiará su posición 10 píxeles hacia abajo desde donde normalmente estaría.

  4. Un elemento con este tipo de posicionamiento se ve afectado por otros elementos y también afecta a otros.

absoluta:

  1. Un elemento con position: absolute; le permite colocar cualquier elemento exactamente donde usted quiere que sea. Usas los atributos de posicionamiento arriba, izquierda, abajo. y derecho a establecer la ubicación.

  2. Se coloca en relación con el antecesor no estático más cercano. Si no hay tal contenedor, se coloca en relación con la página en sí.

  3. Se elimina del flujo normal de elementos en la página.

  4. Un elemento con este tipo de posicionamiento no se ve afectado por otros elementos y tampoco afecta el flujo de otros elementos.

Vea este ejemplo que se explica por sí mismo para una mayor claridad. https://codepen.io/nyctophiliac/pen/BJMqjX

0

position: absolute se pueden colocar en cualquier lugar y permanecer allí como 0,0.

position: relative se coloca con desplazamiento desde la ubicación en que se colocó originalmente en el navegador.