首頁 > web前端 > css教學 > 詳細解讀頁面佈局之position定位

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

亚连
發布: 2018-05-17 17:24:05
原創
2494 人瀏覽過

以下是我給大家整理的頁面佈局之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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板