¿Cuáles son los valores del atributo de posición y cuáles son sus características?

La posición tiene los siguientes valores opcionales:

Entre ellos, el mecanismo de posicionamiento CSS:

CSS tiene tres mecanismos de posicionamiento básicos: flujo normal, flotante y posicionamiento absoluto.

A menos que se especifique lo contrario, todas las cajas se colocan en el flujo normal. Es decir, la posición de un elemento en el flujo normal está determinada por la posición del elemento en (X)HTML.

Los cuadros a nivel de bloque se organizan uno tras otro de arriba a abajo, y la distancia vertical entre cuadros se calcula a partir del margen vertical del cuadro.

Los cuadros en línea están dispuestos horizontalmente en una fila. Su espaciado se puede ajustar mediante relleno horizontal, bordes y márgenes. Sin embargo, el relleno vertical, los bordes y los márgenes no afectan la altura del cuadro en línea. Un cuadro horizontal formado por una línea se llama cuadro de línea, y un cuadro de línea siempre es lo suficientemente alto para acomodar todos los cuadros en línea que contiene. Sin embargo, configurar la altura de la fila puede aumentar la altura de este cuadro.

Posicionamiento absoluto, la posición de un elemento absolutamente posicionado es relativa al elemento principal posicionado más cercano. Si el elemento no tiene un elemento principal posicionado, entonces su posición es relativa a lt;htmlgt;:

El posicionamiento fijo es similar al posicionamiento absoluto, pero el bloque contenedor del elemento es la ventana gráfica. Este método de posicionamiento se utiliza a menudo para crear elementos que permanecen fijos en la misma posición a medida que se desplaza la pantalla. En el siguiente ejemplo, el elemento "uno" se coloca a 80 px de la parte superior de la página y a 20 px del lado izquierdo de la página.

El posicionamiento relativo, el posicionamiento relativo a su posición normal, no afecta el desplazamiento de otros elementos.

El posicionamiento adhesivo se puede considerar como un híbrido de posicionamiento relativo y posicionamiento fijo. El elemento se posiciona relativamente antes de cruzar un cierto umbral y luego se fija.

Este es un posicionamiento especial que combina las dos funciones de posicionamiento de posición: relativa y posición: fija. Los efectos comunes de techo e inferior (barra de retorno de cabeza, barra de cambio inferior, etc.) utilizan este atributo:

Nota:

Posicionamiento estático, elementos HTML de forma predeterminada El método de posicionamiento es estático. El elemento colocado estáticamente no se ve afectado por los atributos superior, inferior, izquierdo y derecho. Siempre se coloca de acuerdo con el flujo normal de la página.

El valor heredado es como el heredado de otros atributos CSS. valor, es decir, heredar el valor de posición del elemento padre.