[CSS]CSS Position 詳解

xiguadada 發(fā)布于2019-08-29 15:23 / 438人閱讀

摘要：三生成固定定位的元素，相對于瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關(guān)，因此不占據(jù)空間，可能會和其他元素發(fā)生重疊。，元素脫離文檔流，相對于以外的第一個父元素定位。

一. CSS position 屬性介紹

CSS中position屬性指定一個元素（靜態(tài)的，相對的，絕對或固定）的定位方法的類型。有static，relative，absolute和fixed四種取值，默認是static。

二. position: static

static：沒有定位，元素出現(xiàn)在正常的文檔流中，忽略left，right，top，bottom和z-index。

所以對元素position屬性設(shè)定static時，left屬性不起作用，但是元素出現(xiàn)在正常的流中。

三. position: fixed

fixed：生成固定定位的元素，相對于瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關(guān)，因此不占據(jù)空間，可能會和其他元素發(fā)生重疊。

窗口滾動不會影響content元素位置，content元素一直在contaniner元素的右下角。

四. position: relative

reletive：元素相對其自己正常位置定位，元素在正常的文檔流中。

沒有設(shè)置left和top時的正常位置。

設(shè)置了left和top屬性，元素位置移動，向右移動50px，向下移動20px。但是元素預(yù)留的空間保持正常流動，也就是不會對其他元素產(chǎn)生影響。

五. position: absolute

absolute：元素絕對定位，相對于static定位以外的第一個父元素，元素脫離文檔流。

所以會找到static定位以外的第一個父元素，因為span的父元素content和container都沒有設(shè)置position屬性，默認為static，找到的第一個父元素就為html，相對于向左移動100px。

如果對content或container設(shè)置position屬性為relative，absolute或fixed，span會相對于content或container來定位。
以下是三個例子，

span元素的第一個position屬性不為static的父元素是content，所以相對于content向左移動10px。

當content屬性設(shè)置為fixed時，span元素相對于content向左移動10px。

span元素第一個position屬性不為static的父元素是container，所以相對于container向左移動10px。

六. 總結(jié)

position: static，元素出現(xiàn)在正常的流中，無法通過left，right，top和bottom設(shè)置元素定位。
position: fixed，元素脫離文檔流，相對于瀏覽器窗口定位不變。
position: relative，元素出現(xiàn)在正常的流中，相對于其正常位置定位。
position: absolute，元素脫離文檔流，相對于static以外的第一個父元素定位。

理解了position的屬性，可以更好的設(shè)計頁面和實現(xiàn)頁面。