CSS position屬性中：fixed使用詳解

關於fixed屬性，在什麼情況下需要用，怎麼用，首先，我們應該先瞭解下fixed屬性的說明：fixed總是以body為定位時的對象，總是根據瀏覽器的視窗來進行元素的定位，通過"left"、 "top"、 "right"、 "bottom" 屬性進行定位。

那麼，我們瞭解了fixed屬性的說明後，就可以知道它的作用了。當我們需要使一個層相對於瀏覽器來自動調整該層的位置的時候，如果你使用position的absolute屬性來定位該層，你會發現absolute屬性並不能達到你想要的css效果，。這時，就需要要用到fixed屬性來定位該層了，當然，你如果不想用fixed屬性的話，你是可以使用JavaScript語句來代替的。下面我們來執行個體示範一下:

1.我們在代碼中加入2個層：div1和div2，代碼如下：

<div class="div1">層1</div><div class="div2">層2</div>

2.寫對應的css代碼，我們先不加fixed屬性試試：

.div1{background-color:#FF0000;width:100px;height:100px;}.div2{background-color:#33FF66;width:100px;height:100px;}

3.然後我們F12運行一下看看效果，我是用的dreamweaver 8，你也可以直接在記事本裡面測試代碼，圖1是沒加fixed屬性的效果：

4.下面我們把fixed屬性加上去，為了讓我們便於觀察，我們讓層div1的寬和高足夠大，css代碼如下：

.div1{background-color:#FF0000;width:2000px;height:2000px;}.div2{background-color:#33FF66;width:100px;height:100px;position:fixed;left:50px;top:50px;}

運行看下效果，2:

5.

下面我們拉動瀏覽器上的上下捲軸和左右捲軸，就都拉到中間的位置吧，3：

你會發現，給div2的position加上fixed屬性後，不論我們如何拉動瀏覽器的捲軸，層2在瀏覽器中的位置都是不會變化的，是不是感覺有躍躍欲試的感覺呢，那麼就趕緊動手實驗一下吧。