關於本站

為了設計出更複雜的版面配置,我們需要探討關於 position 這個屬性。它有一大堆的屬性值,且這些屬性值不但很難懂,也特別難記憶。讓我們一個一個介紹吧,不過也建議你把這頁加入到我的最愛(書籤)裡。

static

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

static 是預設值。任何套用 position: static; 的元素「不會被特別定位」在頁面上特定位置,而是照著瀏覽器預設的配置自動排版在頁面上,所有其他的屬性值都代表該元素會被定位在頁面上。

</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 的元素內設定 toprightbottomleft 屬性,會使其元素「相對地」調整其原本該出現的所在位置,而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間,都不會影響到原本其他元素所在的位置。

</div>

fixed

<div class="fixed">

哈囉~ 先不要太關注我!

</div>

固定定位(position: fixed)的元素會相對於瀏覽器視窗來定位,這意味著即便頁面捲動,它還是會固定在相同的位置。和 relative 一樣,我們會使用 toprightbottomleft 屬性來定位。

我相信你已經注意到頁面右下角的固定定位元素,你現在可以注意看一下,這裡有它所使用的 CSS 樣式:

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

固定定位元素不會保留它原本在頁面應有的空間,不會跟其他元素的配置互相干擾。

令人驚訝的是,行動版裝置上的瀏覽器對 fixed 的支援度比想像的還差很多。學習關於此問題的相關文章.

absolute

absolute 應該是最弔詭的 position 屬性值。absolutefixed 的行為很像,不一樣的地方在於 absolute 元素的定位是在他所處上層容器的相對位置。如果這個套用 position: absolute 的元素,其上層容器並沒有「可以被定位」的元素的話,那麼這個元素的定位就是相對於該網頁所有內容(也就是 <body> 元素)最左上角的絕對位置,看起來就是這張網頁的絕對位置一樣,所以當你的畫面在捲動時,該元素還是會隨著頁面捲動。請記得,只有套用 position: static 的元素屬於「不會被特別定位」的元素,套用 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">

這個元素被設定成絕對定位(position: absolute;),它會相對於它的父元素進行定位(相對於父元素的絕對定位)。

</div>
</div>

這部分確實比較難以理解,但它是讓你可以設計出一個良好 CSS 版面配置的必要知識。下一頁我們將會使用 position 來做出更實務的範例。

  • Creative Commons License