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在瀏覽器中的位置都是不會變化的，是不是感覺有躍躍欲試的感覺呢，那麼就趕緊動手實驗一下吧。

以上是CSS position屬性中：fixed使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！