建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下css如何固定div在頁面頂部或底部，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的船山網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
下面我們通過具體的代碼示例來詳細介紹
css固定div示例
此頁面有一個div分別固定在底部和頂部！你可以移動滾動條看看是否固定！
此頁面有一個div分別固定在底部和頂部！你可以移動滾動條看看是否固定！
此頁面有一個div分別固定在底部和頂部！你可以移動滾動條看看是否固定！
此頁面有一個div分別固定在底部和頂部！你可以移動滾動條看看是否固定！
此頁面有一個div分別固定在底部和頂部！你可以移動滾動條看看是否固定！
此頁面有一個div分別固定在底部和頂部！你可以移動滾動條看看是否固定！
此頁面有一個div分別固定在底部和頂部！你可以移動滾動條看看是否固定！
此頁面有一個div分別固定在底部和頂部！你可以移動滾動條看看是否固定！
此頁面有一個div分別固定在底部和頂部！你可以移動滾動條看看是否固定！
此頁面有一個div分別固定在底部和頂部！你可以移動滾動條看看是否固定！
固定在頂部
固定在底部
上述代碼通過瀏覽器訪問，效果如下圖：
.jpg)
通過截圖我們看見有兩個div塊是顯示在頁面頂部和底部的。我在本地瀏覽移動滾動條。兩個div仍然是固定不動。這里就需要注意到一個重要的css樣式屬性，position:fixed;也就是絕對定位的樣式屬性。position屬性就是可以讓元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中。我們在這里用到的就是fixed樣式，也就是固定位置。
所以我們?nèi)绻胍獙崿F(xiàn)某塊div固定在頁面某位置（相對于瀏覽器窗口），不隨著滾動條而改變。就要掌握position fixed屬性，并且要結(jié)合top:0與bottom:0使用。
看完了這篇文章，相信你對css如何固定div在頁面頂部或底部有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
網(wǎng)頁標題：css如何固定div在頁面頂部或底部
轉(zhuǎn)載來源：http://www.dlmjj.cn/article/gecjod.html
