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