CSS 定位機制

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內(nèi)框在一行中水平布置。可以使用水平內(nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過，設置行高可以增加這個框的高度。

4 種不同類型的定位

static
元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現(xiàn)類似于將 position 設置為 absolute，不過其包含塊是視窗本身。

相對定位
是相對以前的自己的位置。
position:relative; 相對定位特征：
1）不影響元素本身的特性
2）不使元素脫離文檔流（元素移動之后，原來的位置還是保留）
3）如果沒有設置偏移量，對元素本身沒有任何影響
4）提升層級

定位元素位置控制
top/right/bottom/left 定位元素偏移量。

絕對定位
絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。
注釋：根據(jù)用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。
position:absolute; 絕對定位特征：
1）使元素完全脫離文檔流（絕對定位使元素的位置與文檔流無關，因此不占據(jù)空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。）
2）使內(nèi)嵌支持寬高
3）塊屬性標簽內(nèi)容撐開寬度
4）如果有定位父級相對于定位父級發(fā)生偏移，沒有定位父級相對于document發(fā)生偏移。
5）相對定位一般都是配合絕對定位元素使用
6）提升層級

z-index:[number] 定位層級
1）定位元素默認后者層級高于前者
2）建議在兄弟標簽之間比較層級

固定定位（fixed定位）
是相對于screen，比如：右下角的小火箭，返回到頂部；或者客服。
position:fixed 固定定位。
與絕對定位的特征基本一致，差別是始終相對整個文檔進行定位；
問題：IE6不支持固定定位。

經(jīng)驗：
在定位中，

.div4 {
    background-color: black;
    position: fixed;
    right: 20px;
    bottom: 50px;
}

left,right,top,bottom : Xpx, 是貼近那邊，再插入X像素在那一邊。

默認static定位，從父元素集成定位屬性的值（不兼容）

position:static;  默認
position:inherit;  從父級元素集成定位屬性的值（不兼容）

那么一共有5種定位（position:relative|absolute|fixed|static|inherit）

案例：
我們給父級加了透明度，那么它的子集也會繼承這個透明度。

不透明度：
標準瀏覽器 不透明度 opacity: 0~1
IE瀏覽器 濾鏡 filter:alpha(opacity=0~100)