---
tags: 30 天軟體工程師體驗營｜2025
---
> 建議觀看的影音章節：
> - 相對定位與絕對定位技巧
>
# 🏅 切版任務 Day8 - Position 技巧運用 - Banner

## Banner Position 技巧運用
前一天我們已經學習到 position 的設定，在網站設計中，Banner 的圖文配置也可以使用 position 來做設定。

---

## 題目
複製此 [CodePen](https://codepen.io/yen-kg/pen/LEYKQvK) 模板，可以參考完成的下圖，替 .banner、.banner-text、.intro 使用「相對定位 + 絕對定位」的方法將文字放到正確的位置上。
（備註：圖片為隨機不需要理會）

## 回報流程

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


<!-- 解答
.banner {
position: relative;
width: 100%;
height: 500px;
background-image: url('https://picsum.photos/1600/900?random=8');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: visible;
}

.banner-text {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 1;
}

.intro {
position: absolute;
bottom: -50px;
right: 30px;
z-index: 1;
background: rgba(0, 0, 0, 0.5);
padding: 15px 20px;
border-radius: 8px;
font-size: 18px;
line-height: 1.6;
max-width: 500px;
color: #fff;
}

-->

回報區
---

| 報數 | Discord 名字 | CodePen／其他回饋 |
|:----:|:------------:| ----------------------------------------------------------------------------- |
| 1 | dean | [CodePen](https://codepen.io/ch933114/pen/pvvKwMw?editors=1100)|
| 2| 7Lun | [Day8-CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/WbbyOVo)|
| 3| 随縁 | [CodePen](https://codepen.io/zuien/pen/PwwaKwP?editors=1100)|
| 4| Zing | [CodePen](https://codepen.io/TZU-YIN-WANG/pen/pvvKrbW)|
| 5 | 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/VYYdzYO?editors=1010)|
| 6 | 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/gbbKxBg)|
| 7 | Ali | [CodePen](https://codepen.io/Alicia1117/pen/bNNKrMr)|
| 8 | HLC | [CodePen](https://codepen.io/pppbbb262626/pen/YPPvxbW)|
| 9 | WAWATA | [CodePen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/oggyGzz)|
| 10 | William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/ByyVwoJ?editors=1100)|
| 11 | Crystal | [CodePen](https://codepen.io/Crystal-Wu/pen/azzKLEN)|
| 12 | akkk | [CodePen](https://codepen.io/ak-wu-the-decoder/pen/wBBXrjY)|
| 13 | Joseph_Kyuu | [CodePen](https://codepen.io/zrzfastd-the-reactor/pen/pvvKWVX)|
| 14 | BaLaLaYOU | [CodePen](https://codepen.io/bashawxd-the-bashful/pen/XJJYeGd)|
| 15 | Archang | [CodePen](https://codepen.io/pxfnrvgk-the-styleful/pen/gbbKxNW)|
| 16 | Postor | [Codepen](https://codepen.io/peter_hung/pen/jEEKGxR)|
| 17 | Aoi | [Codepen](https://codepen.io/zching07/pen/NPPzwWV)|
| 18 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/WbbyZVq)
| 19 | Owen He | [CodePen](https://codepen.io/owen1120/pen/MYYXrWE?editors=1100)|
|20|小趴|[Codepen](https://codepen.io/papa2415/pen/OPPEzWX)|
| 21 | cks40660 | [CodePen](https://codepen.io/CKS40660/pen/oggypwr)|
| 22 | andy | [CodePen](https://codepen.io/ewnblckz-the-styleful/pen/GggGyYN)|
| 23 | ying | [CodePen](https://codepen.io/Lara-Lin/pen/xbbzLqM?editors=1111)|
| 24 | 謝天 | [CodePen](https://codepen.io/crisxie/pen/QwwxaZQ?editors=1100)|
| 25 | RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/ByyVYam)|
| 26 | tina01170 | [CodePen](https://codepen.io/tina-huang-the-bashful/pen/JooZpYd)|
| 27 | 柔術小子 | [CodePen](https://codepen.io/Li-Lee-Everything-is-PM/pen/azzKVRY)|
| 28 | Melanie | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/PwwaQRe?editors=1100)|
| 29 | 力文 | [CodePen](https://codepen.io/liwenchiou/pen/GggGdQZ)|
| 30 | B | [CodePen](https://codepen.io/Babel777/pen/azzKjdW)|
| 31 | Daniel | [CodePen](https://codepen.io/Hou-Chieh-HUANG/pen/yyyERLR)|
| 32 | Ataya | [CodePen](https://codepen.io/zin-seven/pen/zxxaMww)|
| 33 | Min | [CodePen](https://codepen.io/cvqevoxk-the-decoder/pen/jEEKQpq)|
| 34 | WEIWEI | [CodePen](https://codepen.io/weiwei93/pen/GggGOVK)|
| 35 | mambo | [CodePen](https://codepen.io/chiang_mb/pen/GggGwMz)|
| 36 | allen3290 | [CodePen](https://codepen.io/udadkudw-the-looper/pen/MYYXzxm)|
| 37 | 米粒 | [CodePen](https://codepen.io/kirakira7/pen/azzKamR)|
| 38 | ann.328 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/JooZxKd)|
| 39 | Hugh | [CodePen](https://codepen.io/Hugh-Chen/pen/ByyVMXG?editors=1100)|
| 40 | Michael - 鴿子 | [CodePen](https://codepen.io/KeinSacer_Michael/pen/pvvKaKX)|
| 41 | Peggy | [CodePen](https://codepen.io/cpt23462599/pen/KwweEvd)|
| 42 | Stan | [CodePen](https://codepen.io/Stan-Huang/pen/ByyVbqB)|
| 43 | Sylvia | [CodePen](https://codepen.io/Sylvia93458/pen/PwwaLyM)|
| 44 | An | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/jEEKxVw)|
| 45 | Arthur | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/jEEKxVw)|
| 46 | carrie0416 | [CodePen](https://codepen.io/Hong-Carrie/pen/VYYdOQp)|
| 47 | Jane | [CodePen](https://codepen.io/jkmx/pen/oggyreq)|
| 48 | QoQ | [CodePen](https://codepen.io/xxmevbri-the-reactor/pen/XJJYvZP)|
| 49 | nora_zi | [CodePen](https://codepen.io/Nora-Ch/pen/zxxagmy)|
| 50 | 阿莫 | [CodePen](https://codepen.io/pzmmaukk-the-bold/pen/dPPjbzO)|
| 51 | 馬德 | [CodePen](https://codepen.io/maywang/pen/oggyPjV?editors=1100)|
| 52 | Cyan66 | [CodePen](https://codepen.io/Cyan66/pen/wBBxwRY) |
| 53 | CBK | [CodePen](https://codepen.io/BK-C-the-styleful/pen/JooZVNx) |
| 54 | Klaus Chen | [CodePen](https://codepen.io/Klaus-Chen/pen/JooBPQE) |
| 55 | BL | [CodePen](https://codepen.io/bonnieli1414/pen/oggMNPM) |
| 56 | Holly | [CodePen](https://codepen.io/LEE-HOLLY/pen/vEEaYrQ) |
| 57 | ArvinSu | [CodePen](https://codepen.io/Arvin-Su/pen/ByyPNmr) |
| 58 | Toung | [CodePen](https://codepen.io/Toung/pen/pvvZJxm)
| 59 | Leonard | [CodePen](https://codepen.io/hyyfjqra-the-sans/pen/jEEprvW)
| 60 | yang |[codepen](https://codepen.io/Yang-J/pen/qEEyqZE?editors=1100)|
| 61 | jingle0900 |[codepen](https://codepen.io/EvaLi0472/pen/azzjWor)|
| 62 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/myyjxov)|
| 63 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/EaappxK)|
|64|JHT|[Codepen](https://codepen.io/juanht/pen/KwweZKm)
| 65 | suemma | [CodePen](https://codepen.io/suemma/pen/dPPqoLN)|
| 66 | 牛奶 | [CodePen](https://codepen.io/0omilko0/pen/raaZeMo?editors=1100)|
| 67 | holysi | [CodePen](https://codepen.io/holysi/pen/qEEMqod)|
| 68 | 消波塊 | [CodePen](https://codepen.io/PaulHsiao/pen/oggMKrK)|
| 69 | oyll | [CodePen](https://codepen.io/dizzydog-rgb/pen/wBBEmyR)|
| 70 | Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/yyyxEVj?editors=1100)|
| 71 | cheryl | [CodePen]( https://codepen.io/katrina-the-decoder/pen/vEEzQdd)|
| 72 | wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/emmjgjg)|
| 73 | Aidd. | [CodePen](https://codepen.io/aiddchen/pen/XJJPoRe)|
| 74 | Chia__ | [CodePen](https://codepen.io/Chia-the-encoder/pen/yyyxrPg)|
| 75 | 周周 | [CodePen](https://codepen.io/jhoujhou-the-decoder/pen/KwweEyV?editors=1100)|
| 76 | leo_tzou | [CodePen](https://codepen.io/JH_Portfolio/pen/VYYGJyM?editors=1100)|
| 77 | Jessie | [Jessie 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/vEEVNjp)
|78|蛋殼|[Codepen](https://codepen.io/weybrian/pen/VYYEaWw)
|79|野鴿|[Codepen](https://codepen.io/HoshinoSyouta/pen/XJJxdBG)
| 80 | Apple Pie | [CodePen](https://codepen.io/ymevqzjf-the-builder/pen/OPPBXNQ?editors=1100)|
| 81 | fishcold9714 | [CodePen](https://codepen.io/yu-han-feng/pen/YPPJNpV)|
| 82 | tung | [CodePen](https://codepen.io/oltsegon-the-looper/pen/RNNeKXJ)|
| 83 | Kath | [CodePen](https://codepen.io/JLin-the-lessful/pen/MYYPppj)|
| 84 | Acadia | [CodePen](https://codepen.io/Acadia/pen/yyyREzv)|
| 85 | haohaoliao | [CodePen](https://codepen.io/tqdtaouh-the-styleful/pen/wBBYEWb?editors=1100)|
| 86 | kelsonhouse | [CodePen](https://codepen.io/Kelson-House/pen/qEdBKMw)|
| 87 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/XJJyRLo?editors=1100)|
| 88 | 蛋白 | [蛋白的CodePen Day8](https://codepen.io/sjlu-0/pen/GggwOdM)|
| 89 | 姜承 | [CodePen](https://codepen.io/Troy0718/pen/qEEQLxP?editors=1100)|
| 90 | vima | [CodePen](https://codepen.io/chin7004/pen/ZYYVVGd)|
| 91 | Rogan | [CodePen](https://codepen.io/RoganHsu/pen/YPPdBom)|
| 92 | Astrid | [2025/05/13 DAY8](https://codepen.io/astrid321654/pen/jEEXjZz)|
| 93 | 孟 | [CodePen](https://codepen.io/Mengru0503/pen/RNNvRbb)|
| 94 | duchi | [CodePen](https://codepen.io/sqaz0502/pen/xbbMgQv)|
| 95 | Mic | [CodePen](https://codepen.io/Mic-Pan/pen/zxxbJLY)|
| 96 | ja4071 | [CodePen](https://codepen.io/SHAO-L/pen/jEERJpy)|
| 97 | melody08 | [CodePen](https://codepen.io/Xuan-han-Chen/pen/myyZzxw)|
|98| jean_ke| [CodePen](https://codepen.io/Jean-Ke/pen/XJJvQoE)
| 99 | Nea | [CodePen](https://codepen.io/neacode/pen/WbveLVG)|
| 100 | 富 | [CodePen](https://codepen.io/spring40747/pen/KwpKVVP)|
| 101 | 木乃伊 Kimi | [CodePen](https://codepen.io/veqjtzdb-the-lessful/pen/myJdwXM?editors=1100)|
| 102 | Lynn | [CodePen](https://codepen.io/Yen-Ling-Peng/pen/ByNoELd)|
| 103 | kent_31665 | [CodePen](https://codepen.io/kentlee406/pen/NPqxbam?editors=1100)|
| 104 | 禹成林 | [CodePen](https://codepen.io/useirin/pen/ByyEmGK)|
| 105 | waynetrece | [CodePen](https://codepen.io/waynetrece/pen/yyNzyYv)|
| 106 | JiaMori| [CodePen](https://codepen.io/jiamori/pen/QwbaJdo)|
| 107 | Yanchen16 | [CodePen](https://codepen.io/keyrtlij-the-reactor/pen/ByNVdKr)|
<!--【快速複製】
| 000 | 000 | [CodePen]()|