在網頁中，元素有三種佈局模型：
1、流動模型（Flow） 預設的
2、浮動模型 (Float)
3、層模型（Layer）

1、流動模型（Flow） 

流動（Flow）模型是預設的網頁佈局模式。也就是說網頁在預設狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的。

流動佈局模型具有2個比較典型的特徵：

第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置。

（每一個便籤都顯示著自己本來預設的那個寬高）

第二點，在流動模型下，行內元素都會在所處的包含元素內從左到右水平分佈顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）

2、浮動模型 (Float)

任何元素在預設情況下是不能浮動的，但可以用 CSS 定義為浮動

div{float:left;}　　div{float:right;}

可以為不同的div設定不同的浮動方式來佈局。

3、層模型（Layer）

層模型有三種形式：

1、相對定位(position: relative) 

2、絕對定位(position: absolute)

3、固定定位(position: fixed)

相對定位

如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文件流中

相對於以前的位置移動，偏移前的位置保留不動。在使用相對定位時，就算元素被偏移了，但是他仍然佔據著它沒偏移前的空間。

絕對定位

如果想為元素設定層模型中的絕對定位，需要設定position:absolute(表示絕對定位)，將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊（就是它前面的div並沒有設定定位的屬性），則相對於body元素，即相對於瀏覽器視窗。

被設定了絕對定位的元素，在文件流中是不佔據空間的，如果某元素設定了絕對定位，那麼它在文件流中的位置會被刪除；

我們可以通過z-index來設定它們的堆疊順序 。

絕對定位使元素脫離文件流，因此不佔據空間 ，普通文件流中元素的佈局就當絕對定位的元素不存在時一樣，仍然在文件流中的其他元素將忽略該元素並填補他原先的空間。因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其他元素。　　

浮動元素的定位還是基於正常的文件流，然後從文件流中抽出並儘可能遠的移動至左側或者右側，文字內容會圍繞在浮動元素周圍。它只是改變了文件流的顯示，而沒有脫離文件流，理解了這一點，就很容易弄明白什麼時候用定位，什麼時候用浮動了。

 固定定位

fixed：表示固定定位，與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響。

#div1{

position:fixed;

    bottom:0;

    right:0

}  (始終在螢幕由下端有一個div框，會一直跟著滾動條走)

相對定位可以和絕對定位混著使用 原則是：只要父div定義了定位屬性，子div就會跟著父div的位置去再定位

4.說一下z-index

4.1簡單演示

利用z-index，可以改變元素相互覆蓋的順序。

z-index是針對網頁顯示中的一個特殊屬性。因為顯示器是顯示的圖案是一個二維平面，擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示一個元素在疊加順序上的上下立體關係。

z-index值較大的元素將疊加在z-index值較小的元素之上。對於未指定此屬性的定位物件，z-index 值為正數的物件會在其之上，而 z-index 值為負數的物件在其之下。

<div style="width:200px;height:200px;"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;"><div>

兩個DIV，第二個向上移動50px，正常情況應該是這樣的

第二個div遮住了第一個div，對第二個新增z-index屬性

<div style="width:200px;height:200px;"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;z-index:-5;"><div>

結果就會變成這個樣子，z-index 最簡單的應用就是這樣

4.2只對定位元素有效

z-index屬性適用於定位元素（position屬性值為 relative 或 absolute 或 fixed的物件），用來確定定位元素在垂直於顯示屏方向（稱為Z軸）上的層疊順序，也就是說如果元素是沒有定位的，對其設定的z-index會是無效的。

<div style="width:200px;height:200px;z-index:30"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;z-index:10;"><div>

雖然第一個div的z-index比第二個div大，但是由於第一個div未定位，其z-index屬性未起作用，所以仍然會被第二個div覆蓋。

4.3父子關係處理

如果父元素z-index有效，那麼子元素無論是否設定z-index都和父元素一致，會在父元素上方

<div style="position:relative;width:200px;height:200px;z-index:10;">
        <div style="position:relative;width:100px;height:100px;z-index:-5;"><div>
    </div>

雖然子元素設定z-index比父元素小，但是子元素仍然出現在父元素上方

如果父元素z-index失效（未定位或者使用預設值），那麼定位子元素的z-index設定生效

<div style="position:relative;width:200px;height:200px;">
        <div style="position:relative;width:100px;height:100px;z-index:-5;"><div>
</div>

子元素z-index=-5生效，被父元素覆蓋

4.4相同z-index誰上誰下

1.如果兩個元素都沒有設定z-index，使用預設值，一個定位一個沒有定位，那麼定位元素覆蓋未定位元素

<div style="position:relative;top:50px;width:200px;height:200px;"></div>
<div style=" width:100px;height:100px;"><div>

2.如果兩個元素都沒有定位發生位置重合現象或者兩個都已定位元素且z-index相同發生位置重合現象，那麼按文件流順序，後面的覆蓋前面的。

<div style="position:relative;width:200px;height:200px;"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;"><div>