絕對定位：

如果想為元素設置層模型中的絕對定位，需要設置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> ....

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

?

轉載于:https://www.cnblogs.com/crazy-IT-Boy/p/4720519.html

總結

以上是生活随笔為你收集整理的层模型--绝对定位、相对定位、固定定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。