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:
rel abs
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é?
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.
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.
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.
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
.