前端 文档流定位详解

常规文档流

默认定位为static

熟悉absolute定位

绿色新增定位为absolute

可以发现这里的定位是相当于浏览器的

    .three{
        position: absolute;
        top: 0;

        height: 100px;
        width: 100px;
        background-color: #4B946A;
    }

如上 灰色新增定位为 relative

这就是咱们常说的 子绝父相 。 当父亲容器为相对布局relative，子布局设置为absolute，可以让子布局从父亲布局的左上角开始定位。当然也可能会脱离的。
当子布局为absolute，只要父亲布局有absolute 或者 relative 那么就依据和他最近的父亲布局来定位

    .two{
        position: relative;
        
        margin-left: 20px;
        margin-top: 20px;
        height: 300px;
        width: 300px;
        background-color: #A7A7A7;
    }

再来温习一下fixed

fixed定位是相对于浏览器的
接下来我们修改黄色的div的样式

    .four{
        position: fixed;
        top: 20px;
        height: 50px;
        width: 50px;
        background-color: yellow;
    }

relative定位是相对于自身布局的

也就是说不要管浏览器。相比而言，absolute和fixed则不同