position 常用屬性：
【1】static
靜態定位。默認值，即沒有定位，遵循正常的文檔流對象，不受到 top、bottom、left、right影響。
【2】relative
相對定位。相對於離它最近的使用static定位的父元素進行定位，不脫離文檔流（不影響其他元素的佈局）。
例子：（爲顯而易見，將用內聯樣式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="width: 300px; height: 300px; background: #ccc;">
<div style="width: 100%; height: 20px; background: #777;"></div>
<div style="width: 200px; height: 200px; background: pink">
<div style="width: 50px; height: 50px; background: blue"></div>
<div style="width: 50px; height: 50px; background: green; position: relative; top: 20px; left: 20px;"></div>
<div style="width: 50px; height: 50px; background: yellow"></div>
</div>
</div>
</body>
</html>
green塊使用了relative定位。可見，是相對於離它最近的使用static定位的父元素（pink塊）進行定位 的，不脫離文檔流（其他塊的佈局按文檔流佈局，blue塊與yellow塊之間，仍然保留着green塊的佈局大小）
【3】absolute
絕對定位。相對於離它最近的使用relative定位的父元素進行定位，如沒有找到使用relative定位的父元素，將相對於瀏覽器視口進行定位，脫離文檔流（將影響其他元素的佈局）。
例子：
<!DOCTYPE html>
<html style="width:400px; height: 400px; border:1px solid red; margin-left: 30px;">
<head>
<meta charset="utf-8">
</head>
<body>
<div style="width: 300px; height: 300px; background: #ccc;">
<div style="width: 100%; height: 20px; background: #777;"></div>
<div style="width: 200px; height: 200px; background: pink">
<div style="width: 50px; height: 50px; background: blue"></div>
<div style="width: 50px; height: 50px; background: green; position: absolute; top: 20px; left: 20px;"></div>
<div style="width: 50px; height: 50px; background: yellow"></div>
</div>
</div>
</body>
</html>
green塊使用了absolute定位。可見，它當前沒有找到使用relative定位的父級元素，所以相對於視口（非html）進行佈局，red框是<html></html>節點，另外，yellow塊的佈局改變了，blue塊與yellow塊之間並不保留着green塊的佈局。
現在我們在pink塊上添加relative定位試試看：
<!DOCTYPE html>
<html style="width:400px; height: 400px; border:1px solid red; margin-left: 30px;">
<head>
<meta charset="utf-8">
</head>
<body>
<div style="width: 300px; height: 300px; background: #ccc;">
<div style="width: 100%; height: 20px; background: #777;"></div>
<div style="width: 200px; height: 200px; background: pink; position: relative;">
<div style="width: 50px; height: 50px; background: blue"></div>
<div style="width: 50px; height: 50px; background: green; position: absolute; top: 20px; left: 20px;"></div>
<div style="width: 50px; height: 50px; background: yellow"></div>
</div>
</div>
</body>
</html>
可見，它當前相對於pink塊（使用relative定位的父級元素）進行佈局。
【4】fixed
固定定位。相對於瀏覽器視口進行定位，脫離文檔流（於其他元素的佈局無關）。相對容易理解，不上代碼。