Posición de CSS (Posición)

La propiedad position de CSS se utiliza para especificar cómo se posiciona un elemento en la página, y los métodos de posicionamiento Position (posicionamiento) de CSS tienen los siguientes: posicionamiento estático (static), posicionamiento absoluto (absolute), posicionamiento relativo (relative), posicionamiento fijo (fixed).

Métodos de posicionamiento CSS

La posición adecuada de los elementos en una página web es necesaria para un diseño de布局 de alta calidad. CSS tiene varios métodos para posicionar elementos. En la próxima sección, se presentarán uno por uno estos métodos de posicionamiento.

Posicionamiento estático (static)

Siempre según el flujo normal de la página para posicionar los elementos de posicionamiento estático. Los elementos HTML se encuentran en posición estática por defecto.top,bottom,left,right, yz-índiceCaracterísticas.

Si no se especifica el valor de la propiedad position del elemento, es decir, en el caso predeterminado, el elemento es de posicionamiento estático. Cualquier objeto HTML que soporte la propiedad position se configura predeterminadamente en static. Static es el valor predeterminado de la propiedad position, lo que significa que el bloque se mantiene en la posición original y no se reubica.
En esencia, en la vida cotidiana rara vez utilizamos "position:static", pero a veces, al usar JavaScript para controlar la posición de los elementos, si queremos que otros elementos de posicionamiento se conviertan en posicionamiento estático, debemos usar "position:static;" para lograrlo.

.box {
　　　　relleno:　20px;
　　　　fondo: #7dc765;
}

Colocación relativa (relative)

Los elementos colocados de manera relativa se colocan en relación a su posición normal.

En el esquema de colocación relativa, la posición del cuadro del elemento se calcula en función del flujo normal. Luego, según las propiedades- top o bottom y/o left para desplazar el cuadro desde su posición normal right.

.box {
　　　　position: relative;
　　　　left:　100px;
}

Colocación absoluta (absolute)

Los elementos colocados de manera absoluta se colocan en relación al primer elemento padre con una posición no estática. Si no se encuentra tal elemento, se coloca en la página en relación al 'esquina superior izquierda' de la ventana del navegador. Se pueden especificar una o más propiedades de desplazamiento adicionales utilizando top, right, bottom y left.

Los elementos colocados de manera absoluta se sacan completamente del flujo normal, por lo que no ocupan espacio al colocar elementos del mismo nivel. Sin embargo, depende dez-índiceEl valor de la propiedad, que puede superponerse a otros elementos. Además, los elementos colocados de manera absoluta pueden tenermargeny no se doblan con otros márgenes.

.box {
　　　　position: fixed;
　　　　top:　200px;
　　　　left:　100px;
}

Colocación fija (fixed)

La colocación fija es una subcategoría de colocación absoluta.

La única diferencia es que los elementos colocados de manera fija se mantienen fijos en relación al viewport del navegador y no se mueven al desplazarse.

.box {
　　　　position: fixed;
　　　　top:　200px;
　　　　left:　100px;
}