Day6 你怎在這? 攻克 Position

calendarSep 20, 2023 · 2 分鐘長 · HTML CSS  ·
分享到: linkedincopy

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

語法

1position: 屬性

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

範例

1<div class="sun">Fixed</div>
2<div class="cloud">Static</div>
3<div class="cloud relative">Relative</div>
4<div class="building">Relative
5  <div class="roof">Absolute</div>
6</div>

 1body {
 2  background: lightblue;
 3  text-align: center;
 4  font-weight: 800;
 5}
 6.sun {
 7  width: 100px;
 8  height: 100px;
 9  background: yellow;
10  border-radius: 50%;
11  position: fixed;
12  right: 30px;
13  top: 30px;
14}
15.cloud {
16  width: 300px;
17  height: 100px;
18  left: 20%;
19  background: white;
20  border-radius: 30px 20px 100px 50px;
21}
22.relative {
23  position: relative;
24}
25.building {
26  width: 300px;
27  height: 1000px;
28  background: gray;
29  position: relative;
30  left: 50%;
31}
32.roof {
33  position: absolute;
34  top: 0;
35  left: 50%;
36  width: 100px;
37  height: 70px;
38  background: #000;
39  margin-top: -70px;
40  color: #fff;
41}

在這裡你可以看到

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

實際用途

CSS Position 在網頁設計中當然不只是這樣畫畫，他是非常實用的。以下是一些實際用途：

  1. 懸浮按鈕：當你想在網頁上添加一個固定在一側的懸浮按鈕，以便用戶可以輕鬆回到頁首或執行其他動作時，可以使用 fixed 定位方式。
  2. 訊息提示框：當你需要在頁面的特定位置顯示一個訊息或提示時，可以使用 absolute 定位方式。這樣你可以輕鬆控制提示框的位置和顯示時間。
  3. 圖片輪播：在網頁上創建圖片輪播時，你可以使用 relative 或 absolute 定位方式，使圖片在特定位置輪播顯示。
  4. 懸浮菜單：如果你想在網站的一個區域添加一個懸浮菜單，以便用戶可以訪問不同的頁面或功能，可以使用 fixed 定位方式，讓菜單保持可見性。
  5. 對話框：當需要彈出對話框或模態框時，通常會使用 fixed 或 absolute 定位方式，以確保它出現在用戶的視線範圍內並居中顯示。
  6. 圖像縮放效果：如果你希望用戶可以點擊圖像進行放大或縮小，可以使用 absolute 定位方式，將放大的圖像放在螢幕中央，然後用戶可以通過單擊關閉它。
  7. 自定義滾動條：你可以使用 fixed 定位方式來創建自己的自定義滾動條，以增強網頁的外觀和交互性。

這些只是我列出幾個常見的使用方法，我們不管是在前面幾天或者是接下來的文章都一直會使用 position 語法，因此熟悉這篇文章的內容非常重要。

如果還是不清楚或是需要範例都歡迎提出，也歡迎在 Instagram 和 Google 新聞追蹤毛哥EM資訊密技，訂閱我新開的YouTube頻道：網棧。

我是毛哥EM，讓我們明天再見。

Posts in this Series