La diferencia entre absoluto y relativo en CSS
1. El flujo de documentos es diferente
elativo no se separa del flujo de documentos, absoluto se separa del flujo de documentos.
2. Diferentes clasificaciones
¿Hace referencia a su propia posición estática a través del posicionamiento superior (arriba), inferior (abajo), izquierda (izquierda), derecha (derecha), y puede ser posicionado a través del índice z realiza una clasificación jerárquica.
El absoluto se posiciona arriba, abajo, izquierda y derecha. Seleccione su elemento de posicionamiento principal más cercano. Cuando la posición principal es estática, el elemento absoluto se ubicará en el origen de las coordenadas del cuerpo y se puede clasificar jerárquicamente mediante el índice z.
3. Posicionamiento diferente
Absoluto es el posicionamiento absoluto. El posicionamiento absoluto es relativo al elemento principal y no se ve afectado por otros elementos secundarios dentro del elemento principal; El posicionamiento relativo es el posicionamiento relativo a los elementos hermanos, es decir, el elemento hermano anterior.
Información ampliada
Debido al abuso de publicidad, algunos programas de navegador han comenzado a bloquear el contenido publicitario, por lo que algunos buenos efectos ya no se recomiendan. Por ejemplo, un elemento puede cambiar continuamente su posición a medida que se desplaza la página web.
Ahora puedo lograr ese efecto a través de un atributo de posicionamiento en CSS. Este atributo de elemento es posición: fija, que no se admitía en el pasado.
Significado: Posicionamiento fijo. Esta fijación es muy similar al posicionamiento absoluto. La única diferencia es que el posicionamiento absoluto se fija en una determinada posición de la página web, mientras que el posicionamiento fijo se fija en la posición del marco de visualización del navegador.
Aunque el navegador original no admitía este atributo, el desarrollo de los navegadores ha permitido a los navegadores avanzados de hoy analizar correctamente este atributo CSS. Y a través de CSS HACK, IE6 puede lograr este efecto (actualmente IE5.x no puede lograr este efecto).
Posicionamiento absoluto de elementos CSS, diseño de posicionamiento relativo y flotante, etc.
position:static|sin posicionamiento
position:static es el valor predeterminado para Por lo general, no es necesario especificar el posicionamiento de todos los elementos, a menos que haya otro posicionamiento que deba cancelarse.
ejemplo:
#div-1 {
position:static;
}
2. position:relative | Posicionamiento relativo
Usando position:relative, necesitas arriba, abajo, izquierda, derecha. cuatro atributos para determinar la posición del elemento.
Si desea que la capa div-1 se mueva 20 px hacia abajo y 40 px hacia la izquierda:
ejemplo:
#div-1 {
position:relative;
top:20px;
left:40px;
}
Si se utiliza el posicionamiento relativo, seguir Su capa divafter no aparecerá debajo de div-1, pero aparecerá a la misma altura que div-1.
Se puede ver que position:relative; no es muy útil.
Posicionamiento CSS de la Enciclopedia Baidu