css絕對定位設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另乙個元素或者是初始包含塊，不佔據空間。
脫離文件流
容器 absolute 後，容器會包裹子元素
子元素 absolute 後，容器的高度會塌陷
absolute 後的子元素，不會受無定位父容器的 overflow 所影響
無依賴的絕對定位
不受 relative 限制的 absolute 定位，行為表現上是不使用 top / bottom / left / right 任何乙個屬性或是 auto 值
特點位置跟隨性
原來什麼位置，absolute 後還是什麼位置，只是漂浮起來了
應用配合 margin 進行精確定位
優點：1. 支援負值定位 ; 2. 相容性ie6+
例子：圖示定位
原來的實現方案：
利用跟隨性後：
用法位移
top - left / top - right
bottom - left / bottom - right
拉伸(ie7+)
left - right / top - bottom
特點與 width / height 相互替代
很多情況下，絕對定位的拉伸和 width/height 是可以相互替代的
width : 100% ; height : 100% ;<==>top:0; left:0; right:0; bottom:0;
left:0; top:0 width:50%;<==>left:0; top:0; right:50%;
與 width / height 相互支援
容器無需 width / height 值，內部元素亦可以拉伸；
容器拉伸（寬高不固定），內部元素支援百分比 width / height 值；
相互合作性（ie8+）
當尺寸限制、拉伸 與 margin:auto 同時出現時，就能實現絕對居中效果
例子：遮罩
.container
.cover
.prev,.next
.prev
.next
.page
.list
.container
優點：適合移動端
頭部尾部以及側邊欄都是fixed效果，不跟隨滾動
可以防止移動端使用position：fixed帶來的問題
div>
div>
html,body
.page
/*頂部、底部*/
header,footer
header
footer
/*側邊欄*/
.aside
/*遮罩層*/
.overlay
css 相對/絕對(relative/absolute)定位系列（二）
css 相對/絕對(relative/absolute)定位系列（三）
absolute元素在text-align屬性下的對齊顯示
absolute絕對定位的非絕對定位用法
理解絕對定位和相對定位
概要 本文主要描述xhtml中相對定位和絕對定位各自的本質 用法 區別和兩者之間的關係。以及使用css的left right top bottom屬性 偏移屬性 和margin屬性 外邊距 對定位塊級元素進行布局的方法。本文的示例，請看這個附件demo。說明 佔位空間 元素在文件流中所佔據的空間。物...
理解絕對定位和相對定位布局
p 22,null,left 概要 本文主要描述xhtml中相對定位和絕對定位各自的本質 用法 區別和兩者之間的關係。以及使用css的left right top bottom屬性 偏移屬性 和margin屬性 外邊距 對定位塊級元素進行布局的方法。p 22,null,left 說明 佔位空間 元素...
css絕對定位和相對定位的理解
層級關係為 為改變參照物 橘色框 後的效果 層級關係為 參照物為最頂級的元素情況。層級關係為 僅使用margin屬性布局絕對定位元素的情況 此情況，margin bottom 和margin right的值不再對文件流中的元素產生影響，因為該元素已經脫離了文件流。另外，不管它的祖先元素有沒有定位，都...