CSS Position – W3Schools

一、什麼是CSS的position屬性

CSS的position屬性用於設置頁面元素的定位方式，即我們可以通過設置position屬性來控制元素的位置。

在CSS中有四種可選的position值，分別是static、relative、absolute、fixed，不同的值會影響元素相對於文檔的位置、是否脫離文檔流以及是否跟隨滾動條移動等屬性。

position的默認值為static，該值表示元素使用正常的文檔流進行布局，我們可以通過設置其他的position值來改變元素的布局方式。

    .element {
        position: static;
        position: relative;
        position: absolute;
        position: fixed;
    }

二、static和relative的區別

static元素是HTML文檔默認的布局方式，即按照元素先後順序在網頁中自然排列，不會脫離文檔，也不能通過top、bottom、left、right來修改元素位置。

而relative元素則會相對於原有位置進行偏移，但是不會脫離文檔流，其他元素的位置不會受到影響，top、bottom、left、right屬性可以達到相對於元素原本位置的偏移。

下面是一段簡單的代碼示例：

    .static {
        position: static;
    }
    .relative {
        position: relative;
        top: 30px;
        left: 50px;
    }

三、absolute和fixed的區別

absolute元素會根據父級元素（祖先元素）的位置進行定位，相對於父級元素進行偏移，如果沒有指定父級元素，則相對於文檔進行定位，且該元素脫離文檔流，不佔據頁面的位置。

而fixed元素則會相對於瀏覽器窗口進行定位，無論滾動條如何滾動，該元素的位置不會改變，該元素也脫離文檔流。

    .absolute {
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .fixed {
        position: fixed;
        top: 50px;
        left: 50px;
    }

四、position的應用場景

position屬性可以用於一些常見的布局場景，比如固定側邊欄、懸浮導航欄等。

另外，在CSS中，如果我們需要選擇某一元素的子元素進行樣式操作，常常會使用position屬性以及其它選擇器進行細緻的控制。

    .menu ul {
        position: absolute;
        top: 40px;
        left: 0;
        background-color: #fff;
        display: none;
    }
    .menu:hover ul {
        display: block;
    }

五、總結

position是CSS中的一個重要屬性，通過設置不同的值，可以很好地控制元素的布局方式，從而實現各種有趣的布局效果。

但是在使用時需要注意，濫用position可能會導致瀏覽器渲染性能的下降，影響網站的性能。

因此，合理使用position屬性，能夠幫助我們完成更好的UI設計。