【筆記】學習CSS佈局07——position
為了製作更多複雜的佈局，我們需要討論下 position 屬性。它有一大堆的值，名字還都特抽象，別提有多難記了。讓我們先一個個的過一遍，不過你最好還是把這頁放到書籤裡。
static
.static {
position: static;
}static 是預設值。任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被“positioned”，一個 position 屬性被設定為其他值的元素表示它會被“positioned”。
relative
.relative1 { position: relative; } .relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px; }
relative 表現的和 static 一樣，除非你添加了一些額外的屬性。
在一個相對定位（position屬性的值為relative）的元素上設定 top、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其他的元素的位置則不會受該元素的影響發生位置改變來彌補它偏離後剩下的空隙。
fixed
一個固定定位（position屬性的值為fixed）元素會相對於視窗來定位，這意味著即便頁面滾動，它還是會停留在相同的位置。和 relative
top 、 right 、 bottom 和 left 屬性都可用。
我相信你已經注意到頁面右下角的固定定位元素。你現在可以仔細看看它，這裡有它所使用的CSS：
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}一個固定定位元素不會保留它原本在頁面應有的空隙（脫離文件流）。
令人驚訝地是移動瀏覽器對 fixed 的支援很差。這裡有相應的解決方案
absolute
absolute 是最棘手的position值。 absolute 與 fixed 的表現類似，但是它不是相對於視窗而是相對於最近的“positioned”祖先元素。如果絕對定位（position屬性的值為absolute）的元素沒有“positioned”祖先元素，那麼它是相對於文件的 body 元素，並且它會隨著頁面滾動而移動。記住一個“positioned”元素是指 position 值不是 static 的元素。
這裡有一個簡單的例子：
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}div class="relative">這個元素是相對定位的。如果它是 position: static; ，那麼它的絕對定位子元素會跳過它直接相對於body元素定位。
這個元素是絕對定位的。它相對於它的父元素定位。
這部分比較難理解，但它是創造優秀佈局所必需的知識。
程式碼例項：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.static {
position:static;
background-color:#65ca5c;
}
.relative1 {
position:relative;
background-color: #65ca5c;
}
.relative2 {
position:relative;
top:-20px;
left:20px;
width:500px;
background-color: #65ca5c;
}
.fixed {
position:fixed;
bottom:0;
right:0;
width:400px;
background-color: #65ca5c;
}
.absolute {
position:absolute;
top:600px;
right:0;
width:300px;
height:200px;
background-color: #65ca5c;
}
</style>
</head>
<body>
<div class="static">
<h1>static</h1>
static 是預設值。任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被“positioned”，一個 position 屬性被設定為其他值的元素表示它會被“positioned”。
</div>
<br />
<br />
<div class="relative1">
<h1>relative</h1>
relative 表現的和 static 一樣，除非你添加了一些額外的屬性。
</div>
<br />
<br />
<div class="relative2">
在一個相對定位（position屬性的值為relative）的元素上設定 top 、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其他的元素的位置則不會受該元素的影響發生位置改變來彌補它偏離後剩下的空隙。
</div>
<br />
<br />
<div class="fixed">
<h1>fixed</h1>
一個固定定位（position屬性的值為fixed）元素會相對於視窗來定位，這意味著即便頁面滾動，它還是會停留在相同的位置。和 relative 一樣， top 、 right 、 bottom 和 left 屬性都可用。一個固定定位元素不會保留它原本在頁面應有的空隙（脫離文件流）。
</div>
<br />
<br />
<div class="absolute">
<h1>absolute</h1>
absolute 是最棘手的position值。 absolute 與 fixed 的表現類似，但是它不是相對於視窗而是相對於最近的“positioned”祖先元素。如果絕對定位（position屬性的值為absolute）的元素沒有“positioned”祖先元素，那麼它是相對於文件的 body 元素，並且它會隨著頁面滾動而移動。記住一個“positioned”元素是指 position 值不是 static 的元素。
</div>
</body>
</html>
效果圖如下：
