Los modelos flotantes y de caja generalmente se prefieren en el diseño de la página web. Cuando los elementos tienen una relación jerárquica o un diseño irregular, se utiliza el posicionamiento.
Propiedad de posicionamiento: posición.
Especifique las coordenadas: izquierda \ derecha \ arriba \ abajo.
Valor del atributo de posición:
一 、 posición: estática ；
Para el posicionamiento estático, los elementos estáticos ignorarán cualquier declaración de arriba, abajo, izquierda y derecha. Los elementos con estática se mostrarán normalmente. Es el valor predeterminado del elemento, y el efecto de la configuración es el mismo que no establecerla.
二 、 posición ： absoluto ；
Posicionamiento absoluto, con el elemento primario posicionado como el objeto de referencia, si el elemento primario no está posicionado o no hay elemento primario, el documento completo se usa como el objeto de referencia. El posicionamiento absoluto flota fuera del flujo de diseño y no ocupa espacio.
El bloque contenedor es la base del posicionamiento absoluto.El bloque contenedor es el objeto de referencia que proporciona la coordenada, el desplazamiento y el rango de visualización para el elemento de posicionamiento, es decir, la referencia para determinar el punto inicial y la longitud porcentual del desplazamiento de posicionamiento absoluto;
Por defecto, html es un bloque contenedor grande. Todos los elementos posicionados absolutamente se muestran de acuerdo con la posición y el tamaño porcentual de la ventana. Si definimos el elemento contenedor como el bloque del elemento contenedor, para el bloque incluido Para el elemento de posicionamiento absoluto de, ubicará su posición de visualización de acuerdo con el elemento contenedor superior más cercano con función de posicionamiento.
Defina el elemento como el bloque contenedor: agregue la posición de declaración: relativa al elemento padre del elemento posicionado absolutamente;
Ejemplo:
三 、 posición ： pariente ；
Posicionamiento relativo, ocupando espacio, sin interrumpir el flujo de diseño. Use la posición donde comenzó como referencia.
Ejemplo:
四 、 posición: fija ；
Posicionamiento absoluto relativo al navegador. Independientemente de si la ventana se desplaza o no, el elemento permanecerá en esa posición.
Ejemplo:
El efecto de visualización es el que se muestra en la figura siguiente: configure btnBox para que se muestre siempre en el lado izquierdo de la ventana.
