##**The css position property takes 5 values.**
~~~
position: absolute
position: relative
position: fixed
position: static
position: inherit
~~~
absolute修飾的容器隨著外包裹容器位置的變化而變化。
1. `absolute`元素脫離了文檔結構。和`relative`不同,其他三個元素的位置重新排列了。只要元素會脫離文檔結構,它就會產生破壞性,導致父元素坍塌。(此時你應該能立刻想起來,float元素也會脫離文檔結構)
2. `absolute`元素具有“包裹性”。之前`<p>`的寬度是撐滿整個屏幕的,而此時`<p>`的寬度剛好是內容的寬度。
3. `absolute`元素具有“跟隨性”。雖然`absolute`元素脫離了文檔結構,但是它的位置并沒有發生變化,還是老老實實的呆在它原本的位置,因為我們此時沒有設置`top、left`的值。
4. `absolute`元素會懸浮在頁面上方,會遮擋住下方的頁面內容。
當你想讓兩個元素的content在垂直方向(vertically)分隔時,既可以選擇padding-top/bottom,也可以選擇margin-top/bottom,再此Ruthless建議你盡量使用padding-top/bottom來達到你的目的,這是因為css中存在Collapsing margins(折疊的margins)的現象。
Collapsing margins: margins折疊現象只存在于臨近或有從屬關系的元素,垂直方向的margin中。
- 序
- 開發自己的博客
- 面試集合
- 基礎
- 1、JavaScript
- js技巧
- 2、CSS
- position之absolute
- em與rem
- inline-block
- background
- 圓角、透明度、漸變
- 關于css中的0和none
- css display:none小結
- z-index小結
- 理解滾動條
- 有關@font-face的問題
- 3、HTML
- URI中依賴協議的URL
- 4、MySQL
- limit使用
- 5、jQuery
- 6、移動Web開發
- 設計稿與分辨率
- 字體
- 圖片的自適應
- 7、前端布局bug問題(!<=IE8)
- SEO與頁面結構
- seo
- vsphere 虛擬服務器
- 代碼里的彩蛋(神注釋)
- 玩轉HTML5移動頁面
- 知識梳理
- JS 鍵盤碼
- 其他資源記錄
- temp
- TODO
- 簡單有趣的庫??
- xx