absolute與float
- 具有同樣的性質
- 包裹性
- 破壞性
absolute性質
- 可以脱離overflow的限制
- 無依賴的absolute定位
- 無依賴的定義：
- 不受relative限制的absolute定位，行為表現上是不使用top/right/bottom/left任何一個屬性或者使用auto作為值
- 無依賴的表現
- 脱離文檔流
- 折翼天使
- 去浮動
- 位置跟隨
- 利用margin準確定位
- 無依賴的應用
- 圖標圖片定位覆蓋
- 下拉框定位
- 居中邊緣定位
- 文本圖標對齊與定位
- 脱離文檔流z-index無依賴
- 如果只有一個絕對定位元素，那麼absolute元素就會覆蓋普通元素
- 如果有兩個絕對定位元素，那麼利用DOM文檔流後來居上的規則就可以解決
- 如果有多個絕對定位元素，那麼z-index:1 ，不過出現這種情況要考慮自己的代碼是否有優化的地方
- 如果給彈框類的絕對定位元素z-index>2，那麼必定冗餘，請優化！！！
absolute與left/top/bottom/right
- 相互替代
- left/top/bottom/right 如果都存在的話，顯示的是拉伸效果
- 相互支持
- 容器無需固定的高度和寬度值，內部元素也可以拉伸
- 容器拉伸，內部元素支持百分比width/height值
- 相互合作
- margin auto - 居中效果
- 注意：
- 通常情況下，元素百分比height要想起作用，需要父級容器的height值不是auto，但是在絕對定位下，即使父級容器的height值是auto，只要容器絕對定位拉伸形成，百分比的高度也是支持的
absolute與整體頁面佈局
- 無固定尺寸容器內的絕對定位元素拉伸
- 沒有寬度和高度聲明實現的全屏自適應效果
- 高度自適應的九宮格效果
- 大致理解為有三層div，最外面就是list這一層，中間是list:before這一層，最裏面當然就是list:after這一層
- 最外面一層負責隔離，加上relative，把各個層給分隔開。因為我們知道absolute沒把他們分開是會重疊在一起的，而且不加上relative會使得相對目前的窗口，你就只能看到一個大格子
- 中間那層就是list相關
- 最裏面就是用來擺弄裏面的文字，因為這裏的佈局在html都不怎麼重要，所以選擇了after和before方法
本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。