Day6 你怎在這? 攻克 Position

2023 iThome 鐵人賽

DAY 6

Modern Web

不用庫也能酷 - 玩轉 CSS & Js 特效系列第 6 篇

15th鐵人賽

毛哥EM

2023-09-20 17:08:55

308 瀏覽

分享至

在使用 CSS 做網站時幾乎一定會使用到 position 屬性，不過你真的知道它的原理和使用方式嗎？雖然乍看之下感覺很複雜但其實超簡單，你只需要幾分鐘就能完全理解了。

語法

position: 屬性

Static - 該怎樣就怎樣

預設屬性，該在哪裡在哪裡，區塊元素佔整排，行內元素繼續往右。

通常不需要特別設定，除非其他 CSS 把他設定到別的然後你想要改回來。

Relative - 解鎖偏移（相對位置）

設定成 relative 的元素可以解鎖使用 top, bottom, left, right 屬性，讓它看起來往某個地方移動一點點。但是還是佔據原本的位置。

Absolute - 在哪都行（相對位置）

設定成 absolute 的元素會變成像是一張貼紙一樣貼在網頁上，所以原本的位置不在佔據。你一樣可以使用 top, bottom, left, right 屬性來定位元素。它定位的位置（也就是設定 top:0; left:0; 最左上角的位置）會變成外面不是 position: static 的元素。最常見的使用方法是先在外面使用 relative，然後裡面放入 absolute 就可以完成置中等各種定位。

Fixed - 卡在畫面上

設定 Fixed 的元素會直接以螢幕的左上角為定位點進行定位，並且無論怎麼滾動畫面都會待在哪裡。最常見的使用時機是網頁右下角回到最上面的按鈕，或者是煩人的分享按鈕。

範例

來一個範例讓大家分辨它們不同的效果

https://codepen.io/edit-mr/pen/rNoYOKZ

<div class="sun">Fixed</div>
<div class="cloud">Static</div>
<div class="cloud relative">Relative</div>
<div class="building">Relative
  <div class="roof">Absolute</div>
</div>

body {
  background: lightblue;
  text-align: center;
  font-weight: 800;
}
.sun {
  width: 100px;
  height: 100px;
  background: yellow;
  border-radius: 50%;
  position: fixed;
  right: 30px;
  top: 30px;
}
.cloud {
  width: 300px;
  height: 100px;
  left: 20%;
  background: white;
  border-radius: 30px 20px 100px 50px;
}
.relative {
  position: relative;
}
.building {
  width: 300px;
  height: 1000px;
  background: gray;
  position: relative;
  left: 50%;
}
.roof {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  height: 70px;
  background: #000;
  margin-top: -70px;
  color: #fff;
}

在這裡你可以看到

太陽設定為 fixed，所以就算滾輪滾動也不會改變位置。
第一朵雲因為沒有設定 position，所以就是預設的 static，所以它會在原本的位置。雖然他有設定 left: 20%; 但是因為他是 static 所以沒有效果。
第二朵雲設定為 relative，所以他會在原本的位置，但是可以使用 top, bottom, left, right 來偏移位置。
建築物設定為 relative，所以他會在原本的位置，我們使用 right 來偏移到正中間。可以看到它是元素左邊在最中間，因為對齊點是左上角。
裡面的黑色屋頂設定為 absolute，所以他會以外面的 relative 為對齊點，並且不佔據原本的位置。我們使用 top: 0; left: 50%; 來定位他，但這樣會讓他在建築物裡面，因此我們可以使用 margin-top: -70px; 來把他拉上去。