通過定位實現的div塊網頁中固定效果
本章節介紹一下如何讓通過定位方式讓一個div定位於網頁的一個位置,無論是否拖動滾動條。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{ margin:0px auto; height:1000px; } #fixedLayer{ position:fixed; left:40px; top:10px; width:100px; line-height:30px; background:#FC6; border:1px solid #F90; } </style> </head> <body> <div id="fixedLayer">螞蟻部落</div> </body> </html>
這裡是用過設定元素position:fixed,不過IE6不支援,不過本人感覺IE6還需要考慮嗎。
相關文章
- div在網頁中垂直居中效果網頁
- CSS實現div固定於網頁右下角例項程式碼CSS網頁
- 將div元素固定於頁面指定位置程式碼例項
- 元素滾動到指定位置以後可以實現固定效果
- javascript實現的div塊閃爍效果程式碼例項JavaScript
- SQL Server 通過REVERSE實現C#中lastIndexOf的效果SQLServerC#ASTIndex
- css如何實現div中的文字垂直居中效果CSS
- CSS3實現的div塊上下左右翻滾效果CSSS3
- Flutter 中通過 Container 實現時間軸效果FlutterAI
- 如何在 web 頁面中實現類似 excel 固定表頭 / 標題行的效果?WebExcel
- css實現的div垂直居中效果CSS
- CSS如何實現div的透明效果CSS
- html網頁中如何實現居中效果(程式碼分享)HTML網頁
- css將div固定在網頁底部程式碼例項CSS網頁
- 如何在CSS中對映的滑鼠位置,並實現通過滑鼠移動控制頁面元素效果CSS
- jQuery實現的div在視窗中垂直水平居中效果jQuery
- 網頁佈局實現之div垂直居中網頁
- css如何實現div全屏效果CSS
- div-固定在頁面中間,不被其他元素覆蓋
- 絕對定位實現全屏效果
- 網頁點選實現下載效果網頁
- JS實現網頁換膚功能效果JS網頁
- jquery實現的通過左右方向鍵控制翻頁效果程式碼例項jQuery
- 相容FireFox,IE,Chrome的DIV頁面位置固定FirefoxChrome
- 仿京東、淘寶首頁,通過兩層巢狀的RecyclerView實現tab的吸頂效果巢狀View
- 如何使用純CSS實現固定寬高比div?CSS
- 如何實現div可編輯效果
- javascript實現網頁平滑定位程式碼例項JavaScript網頁
- css如何實現多行文字在div中垂直居中效果CSS
- 純css實現固定在網頁底部選單導航CSS網頁
- 實現網頁大中小字型效果網頁
- 網頁佈局------輪播圖效果實現網頁
- css實現網頁”回到頂部“的程式碼效果CSS網頁
- 分享微信小程式中實現sticky效果的列表頁微信小程式
- Stickup – 輕鬆實現元素固定效果的 jQuery 外掛jQuery
- 滑鼠懸浮div實現旋轉效果
- 如何實現兩個div等高效果
- 如何實現div水平和垂直居中效果