CSS 的幾種 position 定位

2021-10-02 05:17:44 字數 1290 閱讀 3287

1、static:靜態定位,所有標準文件流中的元素預設值。

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

2、relative:相對定位,上浮但不脫離標準文件流。

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

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

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

主要用途:對話方塊的關閉按鈕、滑鼠懸浮按鈕提示(絕對定位的資訊文字會換行:white-space:nowrap;)。

總結:設定 absolute 絕對定位的元素的定位基準是基於祖先裡的非 static 的的元素。

經驗總結:如果寫了absolute,一般都得補乙個 relative。如果寫了 absolute 或 fixed,一定要補 top 和 left 屬性。

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

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

主要用途:頁面中固定位置的小廣告,回到頂部的按鈕。忠告:手機端最好不要用這個屬性,bug太多了 。

5、sticky:粘性定位,是 relative 和 fixed 兩種定位集於一體的特殊定位。(有相容性問題)

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

主要用途:滑動超過閾值時,隱藏標題欄,小於閾值時,顯示標題欄。特別適合導航條上面還有其他內容的頁面使用。

CSS中Position幾種屬性的總結

定位position 定位方向 left right top bottom 靜態定位 static 預設值,就是文件流 絕對定位 absolute 特點 1.不佔據原來的位置 脫標 2.元素使用絕對定位,位置是從瀏覽器出發的 bottom 100px 則元素距瀏覽器底部100px 3.巢狀的盒子,父...

CSS中Position幾種屬性的總結

定位position 定位方向 left right top bottom 靜態定位 static 預設值,就是文件流 絕對定位 absolute 特點 1.不佔據原來的位置 脫標 2.元素使用絕對定位,位置是從瀏覽器出發的 bottom 100px 則元素距瀏覽器底部100px 3.巢狀的盒子,父...

CSS之Position相對定位和絕對定位

absolute的英文意思是絕對的意思,實際上是針對父級元素元素定位,如果父級元素沒有position relative absolute,則追至再上乙個父級元素,直至相對於文件的左上角定位,按照我們中國人的理解觀念,這個其實是相對定位,是脫離文件流的。用了abolute屬性,原有float屬性將失...