詳細解讀頁面佈局之position定位

以下是我給大家整理的頁面佈局之position定位，有興趣的同學可以去看看。

在利用div CSS進行頁面佈局時，position定位的理解如下：

1.（當前元素的）position：relative，不脫離文件流的佈局，相對於自身位置的偏移，原自身位置出現空白時後面的元素不會進行填充，也即當前元素與後面元素的相對位置（或稱相對順序）不會發生改變，我通常理解為：無論怎樣，當前元素與後續元素的前後順序不會改變。

2.（當前元素的）position：absolute，脫離文檔流的佈局，原自身位置出現空白時由後面的元素進行填充，定位的起始位置是父元素（position不是static）或者body，也即當前元素相對於父元素或body的位置是固定不變的，但是後續的元素可能會移動到當前元素的前面，我通常理解為：當前元素與後續元素的前後順序可能會發生改變。

3.（目前元素的）position：fixed，與absolute類似，但不隨捲軸的移動而改變位置（例如有些網頁右下角放置的廣告，當下拉滾動條時，廣告的位置是不變的），當瀏覽器縮小到此元素不可見時，頁面上不會出現捲軸。

4.（目前元素的）position：static，預設值。

上面是我整理給大家的頁面佈局之position定位，希望今後會對大家有幫助。

相關文章：

詳細介紹有關CSS頁面佈局技巧

#詳細講解CSS基礎知識點

jquery CSS3實作下拉導覽功能表功能

以上是詳細解讀頁面佈局之position定位的詳細內容。更多資訊請關注PHP中文網其他相關文章！