默认值 ：
position: static;
相对自己：position: relative;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div.relative { 6 position: relative; 7 left: 30px; 8 border: 3px solid #73AD21; 9 } 10 </style> 11 12 <script> 13 var _hmt = _hmt || []; 14 (function() { 15 var hm = document.createElement("script"); 16 hm.src = "//hm.baidu.com/hm.js?73c27e26f610eb3c9f3feb0c75b03925"; 17 var s = document.getElementsByTagName("script")[0]; 18 s.parentNode.insertBefore(hm, s); 19 })(); 20 </script> 21 </head> 22 <body> 23 24 <h2>position: relative;</h2> 25 26 <p>An element with position: relative; is positioned relative to its normal position:</p> 27 28 <div class="relative"> 29 This div element has position: relative; 30 </div> 31 32 </body> 33 </html>
相对整个页面：position: fixed;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div.fixed { 6 position: fixed; 7 top: 0; 8 9 width: 300px; 10 border: 3px solid #73AD21; 11 } 12 </style> 13 14 <script> 15 var _hmt = _hmt || []; 16 (function() { 17 var hm = document.createElement("script"); 18 hm.src = "//hm.baidu.com/hm.js?73c27e26f610eb3c9f3feb0c75b03925"; 19 var s = document.getElementsByTagName("script")[0]; 20 s.parentNode.insertBefore(hm, s); 21 })(); 22 </script> 23 </head> 24 <body> 25 26 <h2>position: fixed;</h2> 27 28 <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p> 29 30 <div class="fixed"> 31 This div element has position: fixed; 32 </div> 33 34 </body> 35 </html>
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Note: A "positioned" element is one whose position is anything except static.
Here is a simple example:
<!DOCTYPE html> <html> <head> <style> div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; } </style> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?73c27e26f610eb3c9f3feb0c75b03925"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </head> <body> <h2>position: absolute;</h2> <p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p> <div class="relative">This div element has position: relative; <div class="absolute">This div element has position: absolute;</div> </div> </body> </html>