CSS Position(定位)
在CSS中，Position 屬性常常會用到，主要是絕對定位和相對定位，簡單的使用都沒有問題，尤其嵌套起來，就會有些混亂。
Position 屬性：規定元素的定位類型。即元素脫離文檔流的佈局，在頁面的任意位置顯示。
position 屬性值：
#absolute：產生絕對定位的元素，相對於static 定位以外的第一個父元素進行定位。元素的位置透過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative：產生相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會在元素的 LEFT 位置新增 20 像素。
fixed：產生絕對定位的元素，相對於瀏覽器視窗進行定位。
static：預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或 z-index 宣告）。元素的位置透過 "left", "top", "right" 以及 "bottom" 屬性進行規 定。
inherit：規定應該從父元素繼承 position 屬性的值。
我們最常用的是 absolute 和 relative 兩種方式。
position 輔助屬性：
#①left ： 表示向元素的左邊插入多少像素，使元素向右移動多少像素。
②right ：表示要向元素的右邊插入多少像素，使元素向左移動多少像素。
③top ：表示在元素的上方插入多少像素，使元素向下移動多少像素。
④bottom ：表示在元素的下方插入多少像素，使元素向上移動多少像素。
上面屬性的值可以是負，單位：px 。
Absolute 絕對定位
絕對定位；脫離文檔流的佈局，遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為Body文檔本身。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>注意：我們發現，由於我們對Sub1進行了絕對定位，Sub1的位置發生了偏移，而同級Div Sub2，則佔據了Sub1的位置，並且Sub1遮蔽了Sub2.
Relative 相對定位
相對定位；不脫離文檔流的佈局，只改變自身的位置，在文件流程原先的位置遺留空白區域。定位的起始位置為此元素原先在文檔流的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>注意：我們會發現Sub1進行了偏移，並不影響Sub2的位置，同時遮蓋住了Sub2，切記偏移並不是相對於Div Parent的，而是相對於Sub1 原有的位置。
Fixed 定位
固定定位；類似於absolute，但不隨著捲軸的移動而改變位置。
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>注意： 會發現Sub2 總是以body 定位。
