diseño css (posicionamiento)

Posicionamiento

Función: 1, posición especial 2, efecto de cobertura
Características: donde desea colocar el cuadro donde desea
colocar el tipo: posicionamiento relativo posicionamiento absoluto
valor de orientación de posicionamiento: izquierda:; arriba:;
abajo:; derecha:;

Posicionamiento relativo

No se utilizará como diseño para ajustar ligeramente la posición de los elementos.
Lugar de referencia:
En relación con su posición original en la esquina superior izquierda, pero después de moverse aún conservará la posición original
(dejará un espacio en blanco para la interfaz) - "no lo usará como diseño

position:relative;
left：100px;
top: 100px;

relativo: El objeto sigue el flujo regular y se refiere a su posición en el flujo regular a través de las propiedades de desplazamiento de posicionamiento superior, derecho, inferior e izquierdo para compensar sin afectar a ningún elemento en el flujo regular.

Posicionamiento absoluto: hará el diseño

absoluto: el objeto se desvía del flujo normal. En este momento, el atributo de desplazamiento se refiere al elemento ancestro posicionado más cercano. Si no hay un elemento ancestro posicionado, se remontará al elemento del cuerpo. La posición de desplazamiento de la caja no afecta a ningún elemento en el flujo regular, y su margen no se dobla con ningún otro margen.
El posicionamiento absoluto se basa en el elemento padre más cercano con atributos relativos o absolutos.
Lugar de referencia:? El valor predeterminado es la esquina superior izquierda del cuerpo, no la esquina superior izquierda de la ventana del navegador, que
puede cambiar la posición del cuadro y producir un efecto de glándula

Cuanto mayor sea la estructura div en el cuadro inferior, mayor será el nivel

<div class="box1"></div>
    <div class="box2"></div>

      .box1 {
            width: 200px;
            height: 200px； 
            background-color: red;
            /* 保留原先的位置，留下空白
             position: relative;
            left: 50px;
            top: 50px; */
            position: absolute;
            left: 50px;
            top: 50px;


        } 
        .box2 {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50px;
            top: 50px;
            background-color: skyblue;
    

        }

Aquí, el nivel azul es obviamente más alto, el cuadro azul está delante del rojo

/ * El atributo de nivel es ajustar el frente y el reverso del cuadro para mostrar el índice z: n *;

** Conclusión de los hijos e hijas (para que el diseño de la página sea más estable)