1.相对定位|relative 相对于元素在文档流中的初始位置。 相对定位的元素占据文档流，属于普通流定位模型的一部分，对一个元素进行相对定位，这个元素相对于它的起点(即在文档中的位置)进行移动top/left/right/bottom。使用相对定位时，无论是否进行移动，元素仍占据原来空间，移动元素会导致覆盖其他框。 2.绝对定位|absolute 相对于最近的已定位的祖先元素。 绝对定位使元素与文档流无关，不占据文档空间。普通流中的元素会表现的好像绝对定位的元素并不存在一样。绝对定位的元素的位置相对于最近的已定位的祖先元素。若元素没有已定位的祖先元素，那么元素的位置相对于最初的包含块，依据浏览器不同，最初包含块可能为canvas或者html元素。 何谓 已定位的祖先元素（包含块） ？ Take a look at what the CSS 2.1 specification has to say about containing blocks: If the element has ‘position: absolute’, the containing block is established by the nearest ancestor with a ‘position’ of ‘absolute’, ‘relative’ or ‘fixed’ ... If there is no such ancestor, the containing block is the initial containing block. 祖先元素（包含块）是指具有position:absolute|relative|fixed的祖先元素
3.固顶定位|fixed 属于绝对定位的一个子类，包含块是viewport。
理论永远是枯燥的，以下上我学习时写得例子。就像我说的，这是我学习时写的例子，所以，样子可以说是奇丑无比，以至于我都不愿意把它丑陋的样子展示出来，所以，以下只给除html以及css的源代码。
default.html
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="zh-CN" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="" /> <link href="style.css" rel="stylesheet" type="text/css" media="screen" title="position" /> <title>Position example</title> </head>
<body> <div id="content"> <div id="myBox0">myBox0</div> <div id="myBox1">myBox1 <div id="myBox6">myBox6</div> </div> <div id="myBox2">myBox2 <div id="myBox5">myBox5</div> </div> <div id="myBox3">myBox3</div> <div id="myBox4">myBox4</div> <div id="myBox7">myBox7</div> </div> </body> </html> `
style.css
`*{ margin: 0; padding: 0; } body{ text-align: center; }
#content{ width: 800px; height: 100%; margin: 0 auto; background: Fuchsia; text-align: left; }
#myBox0{ width: 200px; height: 300px; background: red; }
#myBox1{ position: relative; left: 20px; top: 20px; width: 100px; height: 200px; background: Aqua; }
#myBox2{ position: absolute; left: 20px; top: 20px; width: 200px; height: 300px; background: yellow; }
#myBox3{ position: static; width: 300px; height: 400px; background: orange; }
#myBox4{ position: fixed; top: 100px; right: 300px; width: 100px; height: 50px; background: #fff; }
#myBox5{ position: absolute; left: 20px; top: 80px; width: 120px; height: 30px; background: blue; }
#myBox6{ position: absolute; left: 20px; top: 80px; width: 120px; height: 30px; background: green; }
#myBox7{ position: absolute; left: 120px; top: 180px; width: 50px; height: 50px; background: black; } `