<
divstyle
="width: 300px;height: 300px;background-color: yellow;"
>
第一層<
/div
>
<
divstyle
="width: 300px;height: 300px; background-color: blue;"
>
第二層<
/div
>
在第乙個div中加入如下**
position：absolute
;top:
100px
;
可以看出第一層生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。覆蓋了第二層的div，脫離出了文件流。
（脫離文件流即是指：元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素。脫離文件流即是元素打亂了這個排列，或是從排版中拿走。）
在第乙個div中加入如下**：
position:relative
;top:
100px
;
relative是生成相對定位的元素，相對於其正常位置進行定位
可以看出，第乙個div原本的空間還是在的，它只是相對於自己原本的位置進行下移，並沒有脫離文件流。但是它也是會覆蓋後邊的塊。
fixed生成固定定位的元素，是相對於瀏覽器視窗進行定位。
<
p>
hello
world
!>
<
divstyle
="width: 300px;height: 300px;background-color: yellow; position:fixed; top:10px;"
>
第一層<
/div
>
<
divstyle
="width: 300px;height: 300px; background-color: blue;"
>
第二層<
/div
>
其效果圖與上邊absolute一樣（是absolute上層父級元素沒有position:relative|absolute的情況下才一樣）
測試的時候在第一層的上邊加入一段文字，將第乙個div下移10px,發現會遮擋文字。
說明fixed脫離文件流，會造成覆蓋。
其他幾個屬性我就不一一細說了。
參考：dom中關於脫離文件流的幾種分析
z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
在上層div**中加入z-index：-1；
效果如下：
相當於將第一層置為底層。
**如下：
<
divstyle
="position:relative;"
>
<
divstyle
="width: 300px;height: 300px;background-color: yellow;"
>
第一層<
/div
>
<
divstyle
="width: 300px;height: 300px; background-color: blue; position: absolute;"
>
第二層<
/div
>
<
/div
>
再將第二個div設定為絕對定位（這時它的父元素變為了最外層div，再進行絕對定位）
效果如下：
需要注意的是，此時第二個div是脫離了文件流了的。
雖然第乙個div移動了，但它實際在文件流中的位置沒有改變，只需要相對於上層div原來的位置設定自己的外邊距，就可以實現消除重疊。
測試**如下：
<
divstyle
="width: 300px;height: 300px;background-color: yellow;position: relative;top:30px;"
>
第一層<
/div
>
<
divstyle
="width: 300px;height: 300px; background-color: blue; margin-top: 30px; "
>
第二層<
/div
>
這是昨天在練習css時遇到的問題，自己動手實驗便於加深理解。利用postion可以實現布局，重疊，透明化等設計，但在具體使用時一定要分清在不在文件流中。
（其他方法，歡迎各位博友進行補充。可能有些概念沒說清楚，歡迎指點）
關於CSS的布局 position屬性
position有五個屬性值 relative absolute fixed static inherit，w3school給出了如下的 說明 下面以乙個demo來說明不同屬性值之間的區別以及對於頁面布局的影響 id parent id sub1 sub1div id sub2 sub2div di...
CSS布局定位 position
取值 static absolute fixed relative static 預設值。無特殊定位 物件遵循html定位規則。absolute 絕對定位 將物件從文件流中拖出 可層疊 用left,right,top,bottom等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在...
CSS樣式布局 position屬性
position屬性 用於定義建立元素布局所用的定位型別，該屬性有多個值 值 描述 static 預設值。沒有定位，元素出現在正常流中 忽略 top,bottom,left,right 或者 z index 宣告 relative 生成相對定位的標籤，相對於標籤原來位置進行定位。因此，left 20...