Relación y Diferencia de Posicionamiento en CSS

Problemas de posicionamiento en CSS

La posición CSS se divide en estática (posicionamiento predeterminado), relativa (posicionamiento relativo), absoluta (posicionamiento absoluto), índice z (principio de superposición)

Vamos a presentarlos uno por uno:

1. estático: sin posicionamiento, el documento aparece en el flujo normal, es decir, en el orden de arriba y abajo en html, izquierda, derecha, abajo, arriba, índice z, inválido.
2. corrección: posición relativa al navegador.
3. Relativo: Posicionamiento relativo al elemento padre directo (también se puede considerar como posicionamiento relativo a su posición original).
4. absoluto: Posicionamiento absoluto, posicionado en relación con el elemento principal no estático.
5. Índice z: cuanto mayor sea el valor, mayor será el frente.

demostración de código

Posición original

Después de agregar el código de posicionamiento fijo
:

 #no1{
    
    
            width: 500px;
            height: 500px;
            background-color: aqua;
           position: fixed;
           left: 200px;
           top:200px
        }

Después de agregar un recuadro pequeño n.º 2 y agregar en relación con el recuadro pequeño, el recuadro pequeño se coloca en relación con el recuadro grande n.º 1
Código:

 #no2{
    
    
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            position:relative;
            left: 50px;
            top: 50px;

        }

Agregue un cuadro no3 y use absolut para colocarlo en relación con el elemento no estático principal, es decir, el
código no2:

#no3{
    
    
            width: 100px;
            height: 100px;
            background-color: tomato;
            position: absolute;
            left: 100px;
            top: 50px;
           
        }

Agregue un atributo de índice z para no3 para que esté detrás.
Código:
#no3{ ancho: 100 px; alto: 100 px; color de fondo: tomate; posición: absoluta; izquierda: 100 px; superior: 50 px ; índice z ;: -2 Manifestación:

 #no2{
    
    
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            

        }
        #content{
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
        }

Después de agregar el posicionamiento relativo para el número 2, se puede ver que el contenido (cuadrado rosa) no se mueve hacia arriba y se llena.

 #no2{
    
    
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            position: relative;
            left:50px;
            top:50px;
        }

Después de agregar absoluto, se puede ver que el contenido (cuadrado rosa) se mueve hacia arriba y ocupa la
posición original de no2.

#no2{
    
    
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            position: absolute;
            left:50px;
            top:50px;

        }