position

為了制作更多復雜的布局，我們需要討論下?position?屬性。它有一大堆的值，名字還都特抽象，別提有多難記了。讓我們先一個個的過一遍，不過你最好還是把這頁放到書簽里。

static

.static {position: static; } <div class="static">

static?是默認值。任意?position: static;?的元素不會被特殊的定位。一個 static 元素表示它不會被“positioned”，一個 position 屬性被設置為其他值的元素表示它會被“positioned”。

</div>

relative

.relative1 {position: relative; } .relative2 {position: relative;top: -20px;left: 20px;background-color: white;width: 500px; } <div class="relative1">

relative?表現的和?static?一樣，除非你添加了一些額外的屬性。

</div> <div class="relative2">

在一個相對定位（position屬性的值為relative）的元素上設置?top、?right?、?bottom?和?left?屬性會使其偏離其正常位置。其他的元素則不會調整位置來彌補它偏離后剩下的空隙。

</div>

fixed

<div class="fixed">

Hello！暫時不要太關注我哦。

</div>

一個固定定位（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”元素是指p osition 值不是?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元素定位。

<div class="absolute">

這個元素是絕對定位的。它相對于它的父元素定位。

</div> </div>

這部分比較難理解，但它是創造優秀布局所必需的知識。下一頁我們會使用?position做更具體的例子。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS中的position的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。