賺錢方法學生推薦 - 折扣碼優惠、排行比價

CSS position 屬性教學:relative和absolute實作

賺錢方法學生推薦 - 折扣碼優惠、排行比價

CSS的position屬性可以讓你設定位置,常用的包含以下四種:

  • fixed
  • sticky
  • relative
  • absolute

其中,前兩者普遍用於網頁導覽列、彈跳視窗等功能;
後兩者則可以用在各式各樣的相對位置當中,是個非常實用的排版屬性!

這篇主要帶大家了解relative和absolute屬性,以及相對位置究竟該怎麼進行設定吧!

CSS position 相對位置入門定義

相對位置的概念,我們以最粗糙的舉例來說:

視窗內出現英文字母並呈現:「AB」
我們如果先放上「A」為基準位置,並把「B」設在「A」的右邊,呈現出來就會是「AB」了。

此時的「A」作為基準,因此「A」的CSS設定即為position:relative;
而「B」相對於「A」放置在右邊,因此「B」的CSS設定即為position:absolute;

事實上CSS實作還包括了內外關係,也就是說通常外層是position:relative; 內層為position:absolute; 內層的內容就會以外層的左上角為基準進行相對於外層的移動。

position relative和absolute實作範例

這裡帶大家實作一個最簡單的範例,讓大家方便理解兩者相對位置關係。

首先,HTML部分放上兩層的div,分別給予class,內容皆留空即可:

<!-- HTML -->

<div class="relative_outside">
  <div class="absolute_inside">
    <!-- 留空 -->
  </div>
</div>

接下來,先完成最基本的class設定:

/* CSS */

/* 紅色外層 */
.relative_outside{
  position: relative; /* 基準設為relative */
  width: 100px;
  height: 100px;
  background: red; /* 設為紅色 */
}

/* 綠色內層 */
.absolute_inside{
  position: absolute; /* 相對者設為absolute */
  width: 100px;
  height: 100px;
  background: green; /* 設為綠色 */
}

設完HTML和CSS後,你會了解到幾件事:

  1. 現在有兩個寬高皆為100的正方形,一個是外層紅色、一個是內層綠色。
  2. 外層紅色正方形當作基準;
    內層綠色正方形為相對於紅色正方形的相對物件。
  3. 兩者有階層關係,綠色雖然大小相同,但實際上HTML是在內層。

此時設定完會長這樣:

position相對位置屬性範例
position相對位置屬性範例

沒錯,目前只看到一個綠色正方形,原因是紅色正方形和綠色正方形的位置相同、大小也相同,因此綠色正方形蓋在紅色正方形上面。

透過absolute新增位置屬性錯開位置

接下來,我們將position:absolute;的綠色正方形,加上top和left的位置屬性,top屬性:垂直與上方的距離;left屬性:水平與左邊的距離。

新增如下:

/* CSS */

/* 綠色內層 */
.absolute_inside{
  position: absolute;
  width: 100px;
  height: 100px;
  background: green;

  /* 加上下面兩個屬性 */
  top: 100px;
  left: 100px;
}

這時候的意思就是,綠色的正方形會相對於紅色正方形往下推100px以及往右推100px。

position相對位置屬性範例
position相對位置屬性範例

完成就會是上圖所示,可以將這個範例的程式碼放到你的程式碼進行測試,並且玩玩看修改top和left屬性,就會更好理解相對位置的功用了。

相對位置以座標來解釋

如果還是覺得有點模糊難以理解,我個人覺得也許比較好的解釋就是用座標來看

CSS世界中,物件的左上角可以視為XY座標的(0,0),該物件內容則是從(0,0)開始往右、往下延展出一個物件。

也就是例如紅色正方形,是從左上角(0,0)各延展100px而生成這個正方形的;綠色也是同樣概念延展出正方形。

position相對位置屬性範例
position相對位置屬性範例

紅色正方形左上角為(0,0),綠色正方形設定相對於紅色正方形的位置中,top即為與頂端的距離100px;left為與左側的距離100px。

因此理解後會變成往下及往右各推100px,最後綠色正方形就會推至座標為(100,100)的位置如上圖所示。

總結

以上就是帶大家透過範例及程式碼,快速入門position屬性的應用,最後透過國中數學的座標概念來進一步記憶相對位置的用法,希望無論你是前端還是剛接觸CSS的人,都能快速上手呦!