iT邦幫忙

1

CSS relative? absolute? 傻傻分不清楚

css
WM 2019-06-24 01:04:301669 瀏覽

CSS 比較常用的有3種定位方式:

  1. position
  2. float
  3. flex

以新手來說,一開始學習定位的方式,以position居多。

其中最容易令人搞混的是position的relative與absolute屬性。

本章節要來探討這兩種屬性的差異,以及產生的結果。

HTML

<body>
  <div class="box-before">
    box-before
  </div>
  <div class="box-1">
    box-1
    <div class="box-2">
      box-2
    </div>
    <div class="box-3">
      box-3
    </div>
  </div>
  <div class="box-after">
    box-after
  </div>
</body>

CSS

body {
  background-color: khaki;
  font-family: Helvetica;
}

.box-before {
  width: 300px;
  height: 50px;
  color: white;
  font-size: 20px;
  background-color: #2e5ec0;
}

.box-1 {
  width: 300px;
  padding: 10px;
  color: white;
  font-size: 20px;
  background-color: #fd3c40;
  box-sizing: border-box;
}

.box-2 {
  height: 50px;
  color: white;
  font-size: 20px;
  background-color: #8c4fb6;
}

.box-3 {
  height: 50px;
  color: white;
  font-size: 20px;
  background-color: #00b842;
}

.box-after {
  width: 300px;
  height: 50px;
  color: white;
  font-size: 20px;
  background-color: #faaa20;
}

初始頁面
https://ithelp.ithome.com.tw/upload/images/20190623/20112573rw89yWaBV0.png

第一層有3個div,依序為box-before、box-1、box-after。

box-1內有box-2、box-3。

未使用position的話,預設會套用position:static。

relative

設定box-1

position: relative;

跟剛剛的一模一樣,因為我們還未定top 、 right 、 bottom 和 left 屬性。

設定

top: 30px;
left: 20px;

box-1往下移動30px、往右移動20px。
https://ithelp.ithome.com.tw/upload/images/20190623/201125735XPo9YXXuE.png

虛線代表box-1原本的位置(position:static)。
https://ithelp.ithome.com.tw/upload/images/20190623/20112573TjRxU9dAtS.png

所以

position: relative;
top: 30px;
left: 20px;
  1. box-1相對於原本的位置(position:static),往下移動30px、往右移動20px。

  2. 仍佔據原本的位置(position:static)。

  3. 其他元素(box-before、box-after)的定位不受影響。

  4. 元素會重疊。

將所有的CSS回復到初始狀態。

這次,我們設定box-2

position: relative;
top: 30px;
left: 20px;

box-2往下移動30px、往右移動20px。
結果一樣。
https://ithelp.ithome.com.tw/upload/images/20190623/20112573K0eB8Mm4iF.png

absolute

設定box-2

position: absolute;
top: 30px;
left: 20px;

頁面顯示
https://ithelp.ithome.com.tw/upload/images/20190623/20112573eBzHVU6F3S.png

完全走鐘...

就幾個問題來一一探討。

1. box-3往上移動

只要position設定absolute,該元素就會完全跳脫該頁面,這概念類似Photoshop的圖層,跳脫的元素位於該頁面上一層圖層。換個說法,它浮在頁面之上。

既然如此,box-2原本所占用的空間將不復存在,所以box-3便會往上移動。

2. box-2寬度改變

我們一開始沒有設box-2的寬度,所以寬度會完全撐開至box-1的邊界,這是block元素的特性。

當box-2跳脫該頁面後,也意味著,它脫離了父元素box-1的範圍,寬度就以內容為基準。

3. 定位的相對元素在哪?

大魔王 本文重點

這是很多新手搞不清楚的地方。

當元素的position設定absolute後,它就會往外層的元素找是否有position:relative | absolute | fixed | inherit(若繼承的是前面3個之一)的元素,若是都沒有,就會以該網頁頁面(<body>)的左上角為定位點。

box-2的外層元素都沒有設定position:relative | absolute | fixed | inherit,自然會以頁面的左上角為定位點,往下移動30px、往右移動20px。

position: absolute;
top: 0;
left: 0;

box-2完全貼齊頁面的左上角。
https://ithelp.ithome.com.tw/upload/images/20190624/20112573IMduRMigTT.png

把top跟left通通刪掉,只留position: absolute。
https://ithelp.ithome.com.tw/upload/images/20190624/201125734bN58GpDZE.png

若沒有設定任何偏移屬性的話,box-2的位置將遵照原本的位置(position:static),但依舊會跳脫原本頁面。

若設定任一邊屬性值,將以此為主。

position: absolute;
top: 0;

貼齊上邊界。
https://ithelp.ithome.com.tw/upload/images/20190624/201125738CP59x3UEh.png

position: absolute;
left: 0;

貼齊左邊界。
https://ithelp.ithome.com.tw/upload/images/20190624/20112573S6G5PXNWYk.png

設box-1為定位元素。
box-1

position: relative;

box-2

position: absolute;
right: 0;
bottom: 0;

box-2就會以box-1為定位元素,貼齊右下角。
不會受到box-1的padding屬性影響。
https://ithelp.ithome.com.tw/upload/images/20190624/20112573zNbgkaathC.png

可設定負數。

position: absolute;
right: -20px;
bottom: -20px;

就會超出box-1的範圍。
https://ithelp.ithome.com.tw/upload/images/20190624/20112573GKDRM7tqQe.png


1 則留言

0
小魚
iT邦大師 1 級 ‧ 2019-06-29 17:36:41

感謝你的整理, 我真的是傻傻的分不清楚.

WM iT邦新手 5 級‧ 2019-06-29 23:02:04 檢舉

謝謝你的feedback,很開心這篇文章對你有幫助。

我要留言

立即登入留言