position:fixed作用簡單介紹
position:fixed可以認為是position:absolute的加強版本的。
關於絕對定位可以參閱CSS 絕對定位一章節。
position:fixed具有position:absolute的一切特點,比如脫離文件流,可以使用top、left、bottom和right進行定位。
它自己獨有的特點就是能夠固定於某一位置,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> *{ margin:0px; padding:0px; } body{height:1200px;} .fixed{ width:50px; height:50px; background:green; position:fixed; left:50px; top:200px; } .abs{ width:50px; height:50px; background:green; position:absolute; right:50px; top:200px; } </style> </head> <body> <div class="fixed"></div> <div class="abs"></div> </body> </html>
相關文章
- javascript作用域簡單介紹JavaScript
- noscript的作用簡單介紹
- js設定元素background-position簡單介紹JS
- javascript作用域和作用域鏈簡單介紹JavaScript
- javascript變數作用於簡單介紹JavaScript變數
- require.js的作用簡單介紹UIJS
- js 函式作用域鏈簡單介紹JS函式
- html的reset按鈕的作用簡單介紹HTML
- CSS position:sticky與position:fixed 區別CSS
- CSS position定位(fixed、sticky)CSS
- position:fixed顯示錯位
- CSS position:fixed 固定定位CSS
- CSS position: fixed 固定定位CSS
- position absolute與fixed 區別
- 不受控制的 position:fixed
- javascript中cookie的secure屬性的作用簡單介紹JavaScriptCookie
- javascript函式讀取變數作用域簡單介紹JavaScript函式變數
- jQuery()方法第二個引數的作用簡單介紹jQuery
- form標籤的enctype屬性的作用簡單介紹ORM
- SVG簡單介紹SVG
- HTML簡單介紹HTML
- ActiveMQ簡單介紹MQ
- HTML 簡單介紹HTML
- JavaScript 簡單介紹JavaScript
- CSS 簡單介紹CSS
- SCSS 簡單介紹CSS
- UICollectionView 簡單介紹UIView
- css簡單介紹CSS
- css選擇器中的加號+的作用簡單介紹CSS
- position:fixed 相對父元素定位
- CSS position fixed和absolute區別CSS
- 不受控制的 position-fixed
- RPC簡單介紹RPC
- Webpack 的簡單介紹Web
- spark簡單介紹(一)Spark
- Flutter key簡單介紹Flutter
- Python簡單介紹Python
- <svg>元素簡單介紹SVG