CSS Position

默认值：

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>

View Code

相对整个页面：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>

View Code

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>

View Code