CSS進階(九) position:absolute
特性
(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