1. 程式人生 > >CSS進階(九) position:absolute

CSS進階(九) position:absolute

剪裁 ble 展現 splay ng- 祖先 isp 使用 之間

特性

(1)塊狀化,display渲染為block或table

(2)文檔流破壞性

(3)包裹性

(4)塊狀格式化上下文,也就是BFC,absolute 的自適應性最大寬度往往不是由父元素決定的

absolute元素包含塊和常規元素的差異

(1)邊界是 padding box 而不是 content box。

(2)內聯元素也可以作為“包含塊”所在的元素

(3)“包含塊”所在的元素不是父塊級元素,而是最近的 position 不為 static 的祖先 元素或根元素

絕對元素的計算和定位是相對於祖先元素的padding-box

absolute 是非常獨立的 CSS 屬性值,其樣式和行為表現不依賴其他 任何 CSS 屬性就可以完成

因為“無依賴絕對定位”的圖標是自動跟在文字 後面顯示的

無依賴絕對定位的相對元素是絕對定位元素相對的前一個元素

與overflow的關系

如果 overflow 不是定位元素,同時絕對定位元素和 overflow 容器之間也沒有定位元素,則 overflow 無法對 absolute 元素進行剪裁

與clip的關系

clip 屬性要想起作用,元素必須是absolutr或者是fixed

clip 隱藏僅僅是決定了哪部分是可見的,非可見部分無法響應點擊事件 等;然後,雖然視覺上隱藏,但是元素的尺寸依然是原本的尺寸

與top/right/bottom/left的關系

同時具有兩個方向的屬性才是真正的絕對定位

只具有一個方向的屬性時,另一個方向相對定位

流體特性

絕對定位元素在不設置方向屬性時,展現為包裹性,在設置了對立方向的屬性時,展現為與div類似的流體特性。其寬度自適應父容器的padding-box。

與margin:auto的關系

可以使用流體特性配合margin:auto實現絕對定位元素的居中

CSS進階(九) position:absolute