iMooc-張鑫旭 absolute

absolute

absolute 和 float 關係

相同的特性表現：

• 包裹性：上了屬性以後，寬度不在鋪滿整行，像是變成了 inline-block

• 破壞性：父級高度塌陷

不一樣的地方：

• float 會脫離文檔流，可是寬度會保持，文檔流的對象會跟隨

• absolute 在沒有top等定位屬性的狀況下，會懸在文檔流之上，初始位置還在原來文檔流的位置，只不過沒了高度和寬度

absolute 和 relative

誤區：設置 absolute 不用每次給父級加 relative

• 無依賴，不受 relative 限制，能夠不用 left/right/top/bottom 等

• 三個圖片並排，若是中間的一個設置成 absolute，那麼，中間一個的位置不會變化，同時第三張圖片會跑到第二張圖片下面

• absolute 脫離文檔流無視父級的 overflow: hidden，relative 還在文檔流中

配合 margin

• 小 tips : html中標籤非要挨着的話能夠用<!-- -->鏈接兩個標籤

• 利用 margin 把 absolute 用成相對定位

父級加上了 relative

• 爆裂拉伸：left/right/top/bottom 所有爲0 能夠覆蓋父級

• 一般狀況，若是父級沒有高度，那麼子級是不能用百分比的。

  可是！！ absolute + left 能夠