本篇文章就給大家詳細介紹如何用css樣式讓div固定在最上面，或者設定div在底部固定。
下面我們通過具體的程式碼範例來詳細介紹
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css固定div樣本</title> <style> .demo{ margin-top: 100px;} .demo1{position: fixed; top: 10px; left:0px; bottom:0px; width:100%; height: 50px;background-color: #acffcb;z-index:999;} .demo2{ position:fixed; left:0px; bottom:0px; width:100%; height: 50px; background-color: #4cedef; z-index:999;} </style></head><body><div class="demo"> <p>此頁面有一個div分別固定在底部和頂部！你可以移動捲軸看看是否固定！</p> <p>此頁面有一個div分別固定在底部和頂部！你可以移動捲軸看看是否固定！</p> <p>此頁面有一個div分別固定在底部和頂部！你可以移動捲軸看看是否固定！</p> <p>此頁面有一個div分別固定在底部和頂部！你可以移動捲軸看看是否固定！</p> <p>此頁面有一個div分別固定在底部和頂部！你可以移動捲軸看看是否固定！</p> <p>此頁面有一個div分別固定在底部和頂部！你可以移動捲軸看看是否固定！</p> <p>此頁面有一個div分別固定在底部和頂部！你可以移動捲軸看看是否固定！</p> <p>此頁面有一個div分別固定在底部和頂部！你可以移動捲軸看看是否固定！</p> <p>此頁面有一個div分別固定在底部和頂部！你可以移動捲軸看看是否固定！</p> <p>此頁面有一個div分別固定在底部和頂部！你可以移動捲軸看看是否固定！</p></div><div class="demo1">固定在頂部</div><div class="demo2">固定在底部</div></body></html>
上述代碼通過瀏覽器訪問，效果如：
通過我們看見有兩個div塊是顯示在頁面頂部和底部的。我在本地瀏覽移動捲軸。兩個div仍然是固定不動。這裡就需要注意到一個重要的css樣式屬性，position:fixed;也就是絕對位置的樣式屬性。position屬性就是可以讓元素放置到一個靜態、相對的、絕對的、或固定的位置中。我們在這裡用到的就是fixed樣式，也就是固定位置。
所以我們如果想要實現某塊div固定在頁面某位置（相對於瀏覽器視窗），不隨著捲軸而改變。就要掌握position fixed屬性，並且要結合top:0與bottom:0使用。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
