css固定div在頁面頂部或底部的具體方法解說
- 藏色散人原創
- 2018-09-04 10:54:4822903瀏覽
我們在進行佈局網頁介面時，偶爾會時不時的產生新需求，那麼根據自己所要實現的需求，就會產生新的問題。如果你是個有資深經驗能力的前端開發者，對於簡單的前端頁面設計所產生的問題應該都不在話下。但是如果你是一位剛入門的新手，就會有點困難。例如我們需要在頁面首頁實現某塊div固定在頁面最頂部或頁面最底部的效果，用css該如何實現？
這篇文章就給大家詳細介紹如何用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使用。
以上就是關於css讓div固定在頁面頂部或底部的具體實現方法，具有一定的參考價值，希望對有需要的朋友有一定的幫助。
以上是css固定div在頁面頂部或底部的具體方法解說的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn