子绝父相布局

子绝父相布局经常使用，是一种比较经典的定位布局

父盒子使用相对定位：占位置，不会对下面的同级盒子产生影响；基准点，子盒子以父盒子左上角为基准点进行移动

子盒子使用绝对定位：不占位置，完全脱标，不会对兄弟元素产生影响

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

<style>
        .father{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background: rgb(189, 17, 17);
            position: absolute;
            left: 100px;
            bottom: 100px;
        }
    </style>

子绝父相布局