css - propiedad - ancho y altura de posición absoluta vs. relativa

propiedad left css

Question

Sé cuál es la posición absoluta y relativa, pero algunos puntos aún no me son aclarados. 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 los puntos son:

• relativa div toma 100% de ancho automáticamente pero div absoluta solo toma ancho de 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 shift div absoluto también pero cuando doy top: 30px entonces solo cambio relativo div. ¿por qué?

• cuando no doy la top:0 , left:0 a la div absoluta que es superior a la altura de div. ¿por qué?

Answer 1

1. position:absolute 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. puedes establecer explícitamente el width:100% si ese es el efecto que buscas.

2. Un elemento con position:relative en su conjunto se comporta de la misma forma que una position:static normal position:static elemento position:static hace. Por lo tanto, establecer la 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. Es probable que esto tenga algo que ver con los elementos principales en su HTML, pero no puedo ayudarlo a menos que proporcione el HTML y el CSS completos 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 por usted y las establecerá donde se representaría el elemento si no tuviera una position:absolute .