- static、absolute、fixed、relative、inherit
1.static
默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
2.absolute
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.one{
position: fixed;
left: 5px;
top: 5px;
width: 100px;
height: 100px;
}
.two{
position: absolute;
top: 30px;
left: 20px;
}
</style>
</head>
<body>
<div class="one">一些文本
<p class="two">更多的文本。</p>
</div>
</body>
</html>
父元素是fixed，子元素相對於父元素來進行absolute定位。
3.fixed
生成絕對定位的元素，相對於瀏覽器窗口進行定位。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.one{
position:fixed;
left:5px;
top:5px;
}
p.two{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
相對於瀏覽器窗口進行定位，右側控制檯隨意拉動，更多的文本的dom隨着拉動變化位置。
4.relative
生成相對定位的元素，相對於其正常位置進行定位。
因此，”left:20” 會向元素的 LEFT 位置添加 20 像素。
5.inherit
規定應該從父元素繼承 position 屬性的值。