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