層模型--絕對定位、相對定位、固定定位

絕對定位：

如果想為元素設置層模型中的絕對定位，需要設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器窗口。

如下面代碼可以實現div元素相對於瀏覽器窗口向右移動100px，向下移動50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

 

相對定位：

 

元素設置層模型中的相對定位，需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然后相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

 

如下代碼實現相對於以前位置向下移動50px，向右移動100px

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

固定定位：

fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由於視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。以下代碼可以實現相對於瀏覽器視圖向右移動100px，向下移動50px。並且拖動滾動條時位置固定不變。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....

萬惡的小廣告就可以用固定定位來實現。