Diferencia entre relativo y absoluto

Question

Estoy leyendo esto article about position, y no entiendo por qué in this example el div relativamente posicionado se ve afectado por el CUERPO, sin embargo, el cuadro absolutamente posicionado lo ignora?
¿No se supone que se comportan igual cuando están posicionados dentro de otro elemento?

la CSS:

body { 
    display: block; 
    margin: 8px; 
} 

#box_1 { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background: #ee3e64; 
} 
#box_2 { 
    position: absolute; 
    top: 0; 
    left: 100px; 
    width: 200px; 
    height: 200px; 
    background: #44accf; 
} 

Answer 1

En el ejemplo mostrado:

así, para el pariente no hay arriba/abajo/izquierda/derecha para el pariente, por lo que se queda donde debe permanecer. (el cuerpo tiene su propio margen y relleno definido por el navegador, que puede anular).

para la absoluta, que tienen la parte superior e izquierda, por lo que va un poco hacia arriba, ya que ignore cualquier otro artículo.

Answer 2

Básicamente, usted tiene cuatro estados de posición, que son los siguientes:

• estática (por defecto)
• relativa
• fijado
• absoluta

La diferencia entre relativa y absoluta es que el pariente es "relativo" a sí mismo (left:15px lo rellenará a la izquierda con 15px), pero es absoluto en relación con su padre (el primer padre no estático) y aplicando el mismo atributo (izquierda: 15px) dará como resultado que se desplace 15px lejos del borde izquierdo del elemento padre.

Esto es en realidad un estudio fascinante y será de gran ayuda en la comprensión de diseño web.

Answer 3

Las explicaciones y descripciones explicadas anteriormente son bien pero para una persona normal o un principiante, es difícil de entender. Es simple.

relativa: relativa es similar a no posicionamiento. Incluso si usted no ha, t utilizarse relativo, y que crea un div aparece como este:

margin-left:10px; 

se movería hacia la izquierda con el espacio de 10px; Y del mismo modo si te gusta esto: posición: relativa;

margin-left:10px; 

Sería igual que no se utilizó ningún pariente. Y si se usa absoluto para algún otro div en la misma secuencia: posición: absoluta;

margin-left:10px; 

Se moverá un total de 10 + 10 = 20px margin-left. Porque se agregan 10px del segundo div de absoluto y 10 px de div div relativo. Es similar a hacer:

#div1{ 
float:left; 
margin-left:10px; 
} 
#div2{ 
float:left; 
margin-left:10px; 
} 

Answer 4

absolute es el mejor para hacer el diseño de la página. debería tener la parte superior izquierda derecha e inferior importadas por CSS.y el relative se realiza sin ninguna etiqueta de CSS

Answer 5

Aquí está la explicación fácil de la posición: absoluta y posición: relativa.

Con posición absoluta, podemos mover un elemento HTML en cualquier parte del page.If no definimos cualquier elemento de posición entonces tomará la posición del cuerpo elemento de lo contrario, se llevará a su posición del elemento de posición definida más cercana . A continuación se muestra el ejemplo.

En este caso, 'div2' toma la posición del elemento 'div1'.

<div id='div1' style="position: relative; left: 100px;top: 10px;"> 
<h1>This is the first position element</h1> 
<div id='div2' style=" position: absolute;left: 100px;top: 150px;"> 
<h2>This is a heading with an absolute position</h2> 
</div> 
</div> 

En este caso 'div2' toma la posición de cuerpo elementos como se define ninguna posición.

<div id='div1'> 
    <h1>This is the first position element</h1> 
    <div id='div2' style=" position: absolute;left: 100px;top: 150px;"> 
    <h2>This is a heading with an absolute position</h2> 
    </div> 
    </div> 

Con posición relativa, los elementos HTML pueden pasar de que es normal position.Below es el ejemplo.

En este caso se moverá de su posición 10px a la izquierda y 10px por debajo.

<div id='div2' style=" position: relative;left: 10px;top: 10px;"> 
<h2>This is a heading with an absolute position</h2> 
</div>