CSS 的幾種 position 定位

1、static:靜態定位,所有標準文檔流中的元素默認值。

該關鍵字指定元素使用正常的佈局行爲,即元素在文檔常規流中當前的佈局位置。此時 top、right、bottom、left 屬性無效。

2、relative:相對定位,不脫離標準文檔流。

該關鍵字指定元素會相對於自身標準文檔流中的位置進行相應的偏移可以給元素設置 top、right、bottom、left 值;

主要用途:微調元素、作爲絕對定位的參考(子絕父相)。

3、absolute:絕對定位,脫離標準文檔流。

該關鍵字指定元素的特點:(1)沒有父元素時,相對於瀏覽器定位(2)有父元素且父元素是 static 定位時,相對於瀏覽器定位(3)有父元素且父元素是非 static 定位時,相對於該父元素定位(多層父元素,相對於最近的非 static 父元素定位)(4)絕對定位後的元素在頁面上脫離標準文檔流,不佔據位置。

4、fixed:固定定位,脫離標準文檔流,相對於瀏覽器定位。

該關鍵字指定元素定位的參照物總是當前的文檔。利用 fixed 定位,很容易讓一個 div 定位在瀏覽器文檔的某個位置。

主要用途:頁面中固定位置的小廣告

5、sticky:粘性定位,是 relative 和 fixed 兩種定位集於一體的特殊定位。

特點:(1)元素在跨越特定閾值之前爲相對定位,之後爲固定定位。特定閾值是指 top、right、bottom、left 其中一個屬性,只有設置特定閾值,才能使該定位生效,否則跟 relative 相對定位相同。(top 優先級比 bottom 高,left 優先級比 right 高)(2)設定 sticky 定位元素的任意父節點的 overflow 屬性必須是 visible(overflow 默認值),否則 sticky 定位不生效。(3)父元素是非 static 定位,則相對於該父元素定位,否則相對於瀏覽器窗口定位。

主要用途:滑動超過閾值時,隱藏標題欄,小於閾值時,顯示標題欄。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章