Introducción detallada de tres posicionamientos en css

Posicionamiento fijo: siempre posicionado en relación con la ventana del navegador

Propósito: cargar para cargar la página, esperando que se cargue la red

<html>
<head>
    <title>定位方式-固定定位</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            height: 2000px;
        }
        div{
            display：none;
            position: fixed;/*设置定位方式为固定定位*/
            bottom:0;
            top:0;
            left:0;
            right:0;
        }

    </style>
</head>
<body>
    <div>这是一个div盒子</div><br>
</body>
</html>

Posicionamiento relativo: consulte la posición original de la etiqueta, se conserva la posición original

Propósito: El hijo es absolutamente el padre, para evitar que el hijo deje el flujo de documentos.

<html>
<head>
    <title>定位方式-相对定位</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            height: 2000px;
        }
        #span2{
            position: relative;/*设置定位方式为相对定位*/
            top: 20px;
            left: 14px;
        }
    </style>
</head>
<body>
    <span id="span1">这是一个</span>
    <span id="span2">这是一个</span>
    <span id="span3">这是一个</span>
</body>
</html>

Posicionamiento absoluto: la posición del elemento es relativa al elemento ancestro posicionado más cercano. Si el elemento no tiene ningún elemento ancestro posicionado, entonces su posición es relativa al cuerpo del bloque original que lo contiene

Propósito: fuera del documento

<head>
    <title>定位方式-绝对定位</title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            width: 500px;
            height: 400px;
            position: relative;
        }
        .zi {
            width: 50px;
            height: 40px;
            background-color: yellow;
            position: absolute;/*设置定位方式为绝对定位*/
            right: 0px;
            bottom: 0px;
        }

    </style>
</head>
<body>
    <div>
        <div class="zi"></div>
    </div>
</body>

Introducción detallada de tres posicionamientos en css

Supongo que te gusta