一. CSS position 屬性介紹

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

二. position: static

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

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

三. position: fixed

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

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

四. position: relative

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

沒有設置left和top時的正常位置。

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

五. position: absolute

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

所以會找到static定位以外的第一個父元素，因為span的父元素content和container都沒有設置position屬性，默認為static，找到的第一個父元素就為html

，相對于向左移動100px。

如果對content或container設置position屬性為relative，absolute或fixed，span會相對于content或container來定位。

以下是三個例子，

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

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

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

六. 總結

position: static，元素出現在正常的流中，無法通過left，right，top和bottom設置元素定位。

position: fixed，元素脫離文檔流，相對于瀏覽器窗口定位不變。

position: relative，元素出現在正常的流中，相對于其正常位置定位。

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

理解了position的屬性，可以更好的設計頁面和實現頁面。

總結

以上是生活随笔為你收集整理的html css position,[CSS]CSS Position 详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。