---
tags: 30 天軟體工程師體驗營｜2025
---
> 建議觀看的影音章節：
> - 相對定位與絕對定位技巧

# 🏅 切版任務 Day7 - position 技巧補充

## position 介紹
在網頁開發中，position 是控制元素定位的關鍵屬性之一。它有多種取值，如 static、relative、absolute、fixed 和 sticky，每種方式都適用於不同的情境。這篇文章將介紹這些 position 值的應用方式，並分享一些進階技巧。

## position 的基本類型
1. static（預設值）：
static 是 HTML 元素的預設定位方式，該元素會根據正常的文檔流排列，無法使用 top、right、bottom 或 left 來改變位置。
<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 position 技巧補充題目 - 範例 1" src="https://codepen.io/yen-kg/embed/EaaYPNa?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/EaaYPNa">
每日任務 - 🏅 position 技巧補充題目 - 範例 1</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

2. relative（相對定位）：
相對定位的元素會根據自身原本的位置進行偏移，不會影響其他元素的排列。
<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 position 技巧補充題目 - 範例 1" src="https://codepen.io/yen-kg/embed/OPPLMbQ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/OPPLMbQ">
每日任務 - 🏅 position 技巧補充題目 - 範例 1</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

3. absolute（絕對定位）：
絕對定位的元素會脫離正常文檔流，並根據最近的已定位祖先元素（非 static）進行定位。
<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 position 技巧補充題目 - 範例 2" src="https://codepen.io/yen-kg/embed/raaBxjB?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/raaBxjB">
每日任務 - 🏅 position 技巧補充題目 - 範例 2</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

4. fixed（固定定位）：
sticky 定位的元素會根據滾動位置改變狀態，在達到特定的 top 或 left 位置後變為 fixed，適用於表頭固定等需求。
<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 position 技巧補充題目 - 範例 3" src="https://codepen.io/yen-kg/embed/PwwYZWQ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/PwwYZWQ">
每日任務 - 🏅 position 技巧補充題目 - 範例 3</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 進階應用技巧
1. 讓子元素置中（absolute + transform）：
若要讓子元素完全置中父容器，可搭配 absolute 與 transform。
<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 position 技巧補充題目 - 範例 4" src="https://codepen.io/yen-kg/embed/ZYYzQLd?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/ZYYzQLd">
每日任務 - 🏅 position 技巧補充題目 - 範例 4</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

2. sticky 應用於固定標題：
<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 position 技巧補充題目 - 範例 5" src="https://codepen.io/yen-kg/embed/VYYZepp?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/VYYZepp">
每日任務 - 🏅 position 技巧補充題目 - 範例 5</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

3. 讓 fixed 內容在移動裝置中可滾動：
<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 position 技巧補充題目 - 範例 6" src="https://codepen.io/yen-kg/embed/xbbKZdZ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/xbbKZdZ">
每日任務 - 🏅 position 技巧補充題目 - 範例 6</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 題目
複製此 [CodePen](https://codepen.io/yen-kg/pen/emYPyzo) 模板，利用「固定定位」將藍色方塊置於視窗的右下角、紅色方塊則利用「絕對定位」至於視窗左下角。

## 回報流程

1. 將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!-- 解答
.box-blue {
position: fixed;
bottom: 20px;
right: 20px;
width: 100px;
height: 100px;
background-color: blue;
}

.box-red {
position: absolute;
bottom: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: red;
}
-->

回報區
---

| 報數 | Discord 名字 | CodePen／其他回饋 |
|:----:|:------------:| ----------------------------------------------------------------------------- |
| 1 | 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/wBBjZwz)|
|2|小趴|[Codepen](https://codepen.io/papa2415/pen/GggdLZo)|
| 3 | 7Lun | [Day7-CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/XJJqQeo)|
| 4 | dean | [Day7-CodePen](https://codepen.io/ch933114/pen/bNNMJLo)|
| 5 | ying | [CodePen](https://codepen.io/Lara-Lin/pen/gbbzymw)|
| 6 | connieK8888 | [CodePen](https://codepen.io/eaksloky-the-sans/pen/WbbJWyM)
| 7 | dd | [CodePen](https://codepen.io/dorihung/pen/bNNMJvo)|
| 8 | 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/raavbrR)|
| 9 | 随縁 | [CodePen](https://codepen.io/zuien/pen/NPPMmJY)|
| 10 | William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/YPPLMMp?editors=1100)|
| 11 | Joseph_Kyuu | [CodePen](https://codepen.io/zrzfastd-the-reactor/pen/OPPZYLz)|
| 12 | pastor | [Codepen](https://codepen.io/peter_hung/pen/wBBjbMX)|
| 13 | Archang | [CodePen](https://codepen.io/pxfnrvgk-the-styleful/pen/KwwRYLG)|
| 14 | WAWATA | [CodePen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/bNNMygx)|
| 15 | Zing | [CodePen](https://codepen.io/TZU-YIN-WANG/pen/OPPZYRZ)|
| 16 | Sylvia | [CodePen](https://codepen.io/Sylvia93458/pen/myyLYxx)|
| 17 | 謝天 | [CodePen](https://codepen.io/crisxie/pen/YPPLbjY)|
| 18 | BaLaLaYOU | [CodePen](https://codepen.io/bashawxd-the-bashful/pen/emmraxZ)|
| 19 | Ataya | [CodePen](https://codepen.io/zin-seven/pen/vEEjqXQ)|
| 20 | Aoi | [CodePen](https://codepen.io/zching07/pen/qEEYGJj)
| 21 | cks40660 | [CodePen](https://codepen.io/CKS40660/pen/jEExjKV)|
| 22 | RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/yyyjdZo?editors=1100)|
| 23 | B | [CodePen](https://codepen.io/Babel777/pen/EaaLBqe)|
| 24 | Owen He | [CodePen](https://codepen.io/owen1120/pen/jEExgNw?editors=1100)|
| 25 | andy | [CodePen](https://codepen.io/ewnblckz-the-styleful/pen/PwweMzz)|
| 25 | Min | [CodePen](https://codepen.io/cvqevoxk-the-decoder/pen/WbbJVGO)|
| 26 | tina01170 | [CodePen](https://codepen.io/tina-huang-the-bashful/pen/vEEjomN)|
| 27 | akkk | [CodePen](https://codepen.io/ak-wu-the-decoder/pen/XJJqvgy)|
| 28 | 馬德 | [CodePen](https://codepen.io/maywang/pen/MYYGNbG)|
| 29 | Melanie | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/XJJqvMy?editors=1100)|
| 30 | Cami | [CodePen](https://codepen.io/irisLife/pen/gbbzVVx)|
| 31 | 柔術小子 | [CodePen](https://codepen.io/Li-Lee-Everything-is-PM/pen/yyyjmEx)|
| 32 | Klaus Chen | [CodePen](https://codepen.io/Klaus-Chen/pen/zxxjgQg?editors=1100)|
| 33 | QoQ | [CodePen](https://codepen.io/xxmevbri-the-reactor/pen/MYYGNQq)|
| 34 | HLC | [CodePen](https://codepen.io/pppbbb262626/pen/WbbyeBV)|
| 35 | 米粒 | [CodePen](https://codepen.io/kirakira7/pen/qEEKEbv)|
| 36 | 力文 | [CodePen](https://codepen.io/liwenchiou/pen/gbbKpaX)|
| 37 | WEIWEI | [CodePen](https://codepen.io/weiwei93/pen/NPPMmxj)|
| 38 | CBK | [CodePen](https://codepen.io/BK-C-the-styleful/pen/LEErVBL)|
| 39 | 林明德| [CodePen](https://codepen.io/lwescocn-the-vuer/pen/xbbzGBd)
| 40 | 周周 | [CodePen](https://codepen.io/jhoujhou-the-decoder/pen/OPPEVwB?editors=1100)
| 41 | 青蛙 | [CodePen](https://codepen.io/Jennie_yang/pen/GggGJaX)
| 42 | FangFang | [CodePen](https://codepen.io/Fang-the-selector/pen/raaKOKG)
| 43 | carrie0416 | [CodePen](https://codepen.io/Hong-Carrie/pen/ZYYRbdv?editors=1100)|
| 44 | Peggy | [CodePen](https://codepen.io/cpt23462599/pen/dPPKYaa)|
| 45 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/YPPvybb)|
| 46 | Cyan66 | [Codepen](https://codepen.io/Cyan66/pen/dPPKGVy)|
| 47 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/qEEKdeP)|
| 48 | Ali | [CodePen](https://codepen.io/Alicia1117/pen/azzKNvz)|
| 49 | Michael-鴿子 | [CodePen](https://codepen.io/KeinSacer_Michael/pen/zxxaqdv)|
| 50 | Holly | [CodePen](https://codepen.io/LEE-HOLLY/pen/azzKdYr)|
| 51 | An | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/yyyjmav)|
| 52 |YuTing|[CodePen](https://codepen.io/venus50533/pen/PwwaNEa?editors=1100)|
| 53 | leo_tzou | [CodePen](https://codepen.io/JH_Portfolio/pen/zxxaBrw)|
| 54 | allen3290 | [CodePen](https://https://codepen.io/udadkudw-the-looper/pen/NPPzrbW)|
| 55 | Hugh | [CodePen](https://codepen.io/Hugh-Chen/pen/oggyxOo)|
| 56 | Kath | [CodePen](https://codepen.io/JLin-the-lessful/pen/raaKLym)|
| 57 | Daniel Huang | [CodePen](https://codepen.io/Hou-Chieh-HUANG/pen/QwwxWrE)|
| 58 | ArvinSu | [CodePen](https://codepen.io/Arvin-Su/pen/YPPvqpV)|
| 59 | anson.www | [CodePen](https://codepen.io/zzkvrkzi-the-sans/pen/WbbyoXL)|
| 60 | yang |[codepen](https://codepen.io/Yang-J/pen/MYYXJee?editors=1100)|
| 61 | ann.328 |[codepen](https://codepen.io/yqmegupa-the-styleful/pen/raaKjdz)|
| 62 | Yan | [CodePen](https://codepen.io/Yan-L/pen/pvvKeXx)|
| 63 | Jane | [CodePen](https://codepen.io/jkmx/pen/ZYYoZYx)|
| 64 | 冠翔 | [CodePen](https://codepen.io/hsrfcdrx-the-bold/pen/yyyEoQq)|
| 65 | mambo | [CodePen](https://codepen.io/chiang_mb/pen/OPPEEmQ)|
| 66 | jingle0900 | [CodePen](https://codepen.io/EvaLi0472/pen/YPPvJaQ?editors=1100)|
| 67 | holysi | [CodePen](https://codepen.io/holysi/pen/qEEKLxG)|
| 68 | Stan | [CodePen](https://codepen.io/Stan-Huang/pen/gbbKEXE)|
| 69 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/raaKRzj)|
| 70 | nora_zizi | [CodePen](https://codepen.io/Nora-Ch/pen/zxxaXwJ)|
| 71 | BL | [CodePen](https://codepen.io/bonnieli1414/pen/raaKgQV)|
| 72 | Toung | [CodePen](https://codepen.io/Toung/pen/yyyqNpw)|
| 72 | Leonard | [CodePen](https://codepen.io/hyyfjqra-the-sans/pen/dPPjXzm)|
| 73 | Chia__ | [CodePen](https://codepen.io/Chia-the-encoder/pen/oggMqWo)|
|74|JHT|[Codepen](https://codepen.io/juanht/pen/RNNJxbX)
| 75 | 牛奶 | [CodePen](https://codepen.io/0omilko0/pen/ByyVjEm)|
| 76 | 消波塊 | [CodePen](https://codepen.io/PaulHsiao/pen/pvvOzRZ)|
| 77 | oyll | [CodePen](https://codepen.io/dizzydog-rgb/pen/MYYqVrY)|
| 78 | Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/GggXdVp?editors=1100)|
| 79 | cheryl | [CodePen](https://codepen.io/katrina-the-decoder/pen/ByyOGjx)|
| 80 | Aidd. | [CodePen](https://codepen.io/aiddchen/pen/RNNYYMm)|
| 81 | Jessie | [Jessie 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/bNNmVom)
| 82 | tung | [CodePen](https://codepen.io/oltsegon-the-looper/pen/QwwZjoe)|
| 83|蛋殼|[Codepen](https://codepen.io/weybrian/pen/zxxmrpP)
| 84 | Apple Pie | [CodePen](https://codepen.io/ymevqzjf-the-builder/pen/ByyqKXJ?editors=1100)|
| 85 | fishcold9714 | [CodePen](https://codepen.io/yu-han-feng/pen/KwwGapr)|
| 86 | kelsonhouse | [Codepen](https://codepen.io/Kelson-House/pen/KwwGQjB)|
| 87 | Acadia | [CodePen](https://codepen.io/Acadia/pen/VYYEdmo)|
| 88 | haohaoliao | [CodePen](https://codepen.io/tqdtaouh-the-styleful/pen/emmPjLm?editors=1100)|
| 89 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/bNNQBEp)|
| 90 | 蛋白 | [蛋白的CodePen Day7](https://codepen.io/sjlu-0/pen/VYYBPNV)|
| 91 | 姜承 | [CodePen](https://codepen.io/Troy0718/pen/xbbQpdd)|
| 92 | vima | [CodePen](https://codepen.io/chin7004/pen/OPPraqO)
| 93 | Astrid | [2025/05/13 DAY8](https://codepen.io/astrid321654/pen/myyavMg)|
| 94 | 孟 | [CodePen](https://codepen.io/Mengru0503/pen/gbbqryb)|
| 95 | duchi | [CodePen](https://codepen.io/sqaz0502/pen/ZYYwLoq)|
| 96 | Mic | [CodePen](https://codepen.io/Mic-Pan/pen/gbbEdeG)|
| 97 | ja4071 | [CodePen](https://codepen.io/SHAO-L/pen/oggOGyo)|
| 98 | melody08 | [CodePen](https://codepen.io/Xuan-han-Chen/pen/azzgRVb)|
|99| jean_ke| [CodePen](https://codepen.io/Jean-Ke/pen/zxxgyRR)
|100| Nea | [CodePen](https://codepen.io/neacode/pen/yyNBGxg)|
|101| 富 | [CodePen](https://codepen.io/spring40747/pen/vEOYNGy)|
|102| 木乃伊 Kimi | [CodePen](https://codepen.io/veqjtzdb-the-lessful/pen/dPoyRzp)|
|103| Lynn | [CodePen](https://codepen.io/Yen-Ling-Peng/pen/NPqGmxw)|
|104| kent_31665| [CodePen](https://codepen.io/kentlee406/pen/MYwKbvw)|
| 105 | 禹成林 | [CodePen](https://codepen.io/useirin/pen/vEEMWVo)|
| 106 | waynetrece | [CodePen](https://codepen.io/waynetrece/pen/GgJMgKJ)|
| 107 | HedyChen | [CodePen](https://codepen.io/hedychen/pen/ogXGQPa)|
| 108 | taishan_90178 | [CodePen](https://codepen.io/candy99/pen/GgJQWRw)|
| 109 | Yanchen16 | [CodePen](https://codepen.io/keyrtlij-the-reactor/pen/ogXygNz)|
| 110 | World | [CodePen](https://codepen.io/HexschoolVuePujols/pen/JodaJdL)|
<!--【快速複製】
| 00 | 000 | [CodePen]()|