首頁  >  文章  >  web前端  >  css固定div在頁面頂部或底部的具體方法解說

css固定div在頁面頂部或底部的具體方法解說

藏色散人
藏色散人原創
2018-09-04 10:54:4822855瀏覽

我們在進行佈局網頁介面時,偶爾會時不時的產生新需求,那麼根據自己所要實現的需求,就會產生新的問題。如果你是個有資深經驗能力的前端開發者,對於簡單的前端頁面設計所產生的問題應該都不在話下。但是如果你是一位剛入門的新手,就會有點困難。例如我們需要在頁面首頁實現某塊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>

上述程式碼透過瀏覽器訪問,效果如下圖:

css固定div在頁面頂部或底部的具體方法解說

透過截圖我們看見有兩個div塊是顯示在頁面頂部和底部的。我在本地瀏覽行動滾動條。兩個div仍然是固定不動。這裡就需要注意到一個重要的css樣式屬性,position:fixed;也就是絕對定位的樣式屬性。 position屬性就是可以讓元素放置到一個靜態的、相對的、絕對的、或固定的位置。我們在這裡用到的就是fixed樣式,也就是固定位置。

所以我們如果想要實作某塊div固定在頁面某位置(相對於瀏覽器視窗),不隨著捲軸而改變。就要掌握position fixed屬性,並且要結合top:0與bottom:0使用。

以上就是關於css讓div固定在頁面頂部或底部的具體實現方法,具有一定的參考價值,希望對有需要的朋友有一定的幫助。

以上是css固定div在頁面頂部或底部的具體方法解說的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn