absoluto vs ancho y alto de posición relativa

Question

sé cuál es la posición relativa absoluta de & pero todavía no me han sido aclarados algunos puntos. para referencia

css:

.rel{ 
    position:relative; 
    background:red; 
} 
.abs{ 
    position:absolute; 
    background:blue; 
} 

html:

<div class="rel">rel</div> 
<div class="abs">abs</div> 

ahora puntos son:

• div relativa toma 100% anchura automáticamente pero div absoluta sólo toma ancho del contenido . ¿por qué?

• cuando doy la altura al 100% no hay ningún efecto en el div relativo pero el div absoluto toma el 100% de altura. ¿por qué?

• cuando doy margen-top: 30px es cambio absoluto div también pero cuando doy top: 30px entonces solo desplazamiento relativo de div. ¿por qué?

• cuando no doy top:0 , left:0 al div absoluto, se necesita una altura superior a div. ¿por qué?

Answer 1

1. Configuración position:absolute elimina el elemento en cuestión del flujo normal de la estructura del documento. Entonces, a menos que establezcas explícitamente un ancho, no sabrá qué tan ancho es. puede establecer explícitamente width:100% si ese es el efecto que busca.

2. Un elemento con position:relative en general se comporta de la misma manera que un elemento normal position:static. Por lo tanto, establecer height:100% no tendrá ningún efecto a menos que el elemento principal tenga una altura definida. Por el contrario, los elementos posicionados absolutos se eliminan del flujo de documentos, por lo que son libres de ajustarse a la altura que tenga actualmente su elemento contenedor.

3. Esto es probablemente algo que ver con los elementos principales en su HTML, pero no puedo ayudarlo a menos que proporcione el HTML y CSS completo de su página.

4. El valor predeterminado de las propiedades superior e izquierda es automático. Esto significa que el navegador calculará estas configuraciones y las establecerá donde se representaría el elemento si no tuviera position:absolute.