為了制作更多復(fù)雜的布局，我們需要討論下 position 屬性。它有一大堆的值，名字還都特抽象，別提有多難記了。讓我們先一個個的過一遍，不過你最好還是把這頁放到書簽里。
.static { position: static;} static 是默認值。任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被“positioned”，一個 position 屬性被設(shè)置為其他值的元素表示它會被“positioned”。
.relative1 { position: relative;}.relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px;} relative 表現(xiàn)的和 static 一樣，除非你添加了一些額外的屬性。
在一個相對定位（position屬性的值為relative）的元素上設(shè)置 top 、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其他的元素則不會調(diào)整位置來彌補它偏離后剩下的空隙。
Hello！暫時不要太關(guān)注我哦。
</div> 一個固定定位（position屬性的值為fixed）元素會相對于視窗來定位，這意味著即便頁面滾動，它還是會停留在相同的位置。和 relative 一樣， top 、 right 、 bottom 和 left 屬性都可用。
我相信你已經(jīng)注意到頁面右下角的固定定位元素。你現(xiàn)在可以仔細看看它，這里有它所使用的CSS：
.fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white;}一個固定定位元素不會保留它原本在頁面應(yīng)有的空隙。
令人驚訝地是移動瀏覽器對 fixed 的支持很差。這里有相應(yīng)的解決方案.
absolute 是最棘手的position值。 absolute 與 fixed 的表現(xiàn)類似，除了它不是相對于視窗而是相對于最近的“positioned”祖先元素。如果絕對定位（position屬性的值為absolute）的元素沒有“positioned”祖先元素，那么它是相對于文檔的 body 元素，并且它會隨著頁面滾動而移動。記住一個“positioned”元素是指p osition 值不是 static 的元素。
這里有一個簡單的例子：
.relative { position: relative; width: 600px; height: 400px;}.absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px;} 這個元素是相對定位的。如果它是 position: static; ，那么它的絕對定位子元素會跳過它直接相對于body元素定位。
這個元素是絕對定位的。它相對于它的父元素定位。
</div> 這部分比較難理解，但它是創(chuàng)造優(yōu)秀布局所必需的知識。下一頁我們會使用 position 做更具體的例子。
