前端 文檔流定位詳解

常規文檔流

默認定位爲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則不同