---
tags: 軟體工程師體驗營 - 2024
---

# 🏅 切版任務 Day11 - position 練習 I

觀看影音「相對定位與絕對定位技巧」了解 position 運用後，
嘗試練習下方題目。

## 問題

運用 position 語法將三個正方形放置如圖所示位置：


> 正方形資訊：
> - `300px * 300px` `#474a4d`
> - `200px * 200px` `#f7b977`
> - `100px * 100px` `#028760`

## 回報流程

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


<!--

解答：
https://codepen.io/hexschool/pen/ExezVqg

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:--------------------:|:--------------------------------------------------------------------------:|
|1|Ran|[Codepen](https://codepen.io/Ran-Ran-the-typescripter/pen/ZENExxM)|
|2|白白|[Codepen](https://codepen.io/YuBai/pen/YzMmmQe)|
|3|Camila|[Codepen](https://codepen.io/camilalo/pen/MWdgyqr)|
|4|Larry|[Codepen](https://codepen.io/larrylinr5/pen/qBGBByB?editors=1100)
|4|RayChen1996|[Codepen](https://codepen.io/raychen1996/pen/NWVWWLy)|
|6|mike_2049|[Codepen](https://codepen.io/mike2049/pen/mdYddQR?editors=1100)|
| 7 | Meng | [Codepen](https://codepen.io/menglin1203/pen/eYaOQKx) |
| 8 | 小米 | [Codepen](https://codepen.io/hlgudwue-the-typescripter/pen/MWdWWxZ) |
| 9 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/wvbvvby) |
| 10 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/BaeayaY) |
| 11 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/dyEyPYO?editors=1100) |
|12|Michelle0417|[Codepen](https://codepen.io/michelle0417/pen/gOJOOVG)|
|13|JUN_|[Codepen](https://codepen.io/Jun-L/pen/qBGBENN)|
| 14 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/pomovRB) |
| 15 | yuling | [Codepen](https://codepen.io/igzdflpu/pen/bGyGNBx) |
| 16 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/abroKMR) |
| 17 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/QWRWwrR) |
| 18 | Chen | [Codepen](https://codepen.io/yingchangchen/pen/dyEyPQZ) |
| 19 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/PovowBd) |
| 20 | LGJason | [Codepen](https://codepen.io/j811108/pen/YzbzXPj) |
| 21 | zuien1120 | [Codepen](https://codepen.io/anki0072011/pen/jOoNXmR) |
| 22 | Eileen | [Codepen](https://codepen.io/Eileen-io/pen/GRaRJgP) |
| 23 | macihuang | [Codepen](https://codepen.io/macy1215/pen/ExzxjBp) |
| 24 | Andy_12 | [Codepen](https://codepen.io/lifann/pen/oNRNXRV) |
| 25 | jerry | [Codepen](https://codepen.io/sony791210/pen/xxNxGvQ) |
| 26 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/JjqjYGz) |
| 27 | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/JjqjYbV) |
| 28 | liugod3824🔥 |[Codepen](https://codepen.io/kjssvtkr-the-animator/pen/pomojdV)✔|
| 29 | Eden | [Codepen](https://codepen.io/iseden/pen/wvbvKPe)|
| 30 | 阿宸 | [Codepen](https://codepen.io/xnocndjt-the-sans/pen/ZENEbxq?editors=1100) |
| 31 | kawa | [Codepen](https://codepen.io/z83xji6/pen/VwOwewm) |
| 32 | boin | [Codepen](https://codepen.io/boinji/pen/dyEyGpN) |
| 33 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/ZENEQRG)|
| 34 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/ZENEQqb?editors=1100) |
| 35 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/vYwYLgJ?editors=1100) |
| 36 | damon0323 | [Codepen](https://codepen.io/swk9eny2/pen/gOJOrPq?editors=1100) |
| 37 | Finley_97025 | [Codepen](https://codepen.io/Jamie-Lin-the-selector/pen/MWdWyQp?editors=1100) |
| 38 | LYC | [Codepen](https://codepen.io/LY-C/pen/KKLKzpp) |
| 39 | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/mdYdEdy?editors=1100) |
| 40 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/wvbvWdJ) |
| 41 | Tanyaaaa | [Codepen](https://codepen.io/tanya77777/pen/oNRNLmj) |
| 42 | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/GRaRjQx) |
| 43 |james867. |[Codepen](https://codepen.io/JCT34/pen/zYQYKqY)|
| 44 | s870012 |[Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/Baeajgb)|
| 45 | anderson666 |[Codepen](https://codepen.io/goodmanbuild/pen/wvbvoew)|
| 46 | MY | [Codepen](https://codepen.io/ahmomoz/pen/xxNxRPW) |
| 47 | Maxine | [Codepen](https://codepen.io/Maxine0713/pen/dyEyOjw) |
| 48 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/zYQYomR) |
| 49 | KUN. | [Codepen](https://codepen.io/barry91205/pen/bGyGBXw) |
| 50 | JY | [Codepen](https://codepen.io/jylee0805/pen/rNgNWbJ?editors=1100)|
| 51 | hongru-LyNn | [Codepen](https://codepen.io/LyNnYWu/pen/KKLKaVX) |
| 52 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/OJYJWmb?editors=1100) |
| 53 | MDFK | [Codepen](https://codepen.io/aqcrrhwb/pen/zYQYZGO?editors=1100) |
| 54 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/jOoOBqQ) |
| 55 | Lauren | [Codepen](https://codepen.io/Lauren8/pen/jOoOBLJ) |
| 56 | CrystalLala | [Codepen](https://codepen.io/crystallala/pen/KKLKWZL) |
| 57 | FURUTO | [Codepen](https://codepen.io/oditudnw-the-flexboxer/pen/qBGBrYr) |
| 58 | leo.chang | [Codepen](https://codepen.io/s16777216/pen/abrbJqZ) |
| 59 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/LYoYyxd) |
| 60 | wei | [Codepen](https://codepen.io/Wei-the-sasster/pen/QWRWvpb) |
| 61 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/YzbzVgM?editors=1100) |
| 62 | peggy | [Codepen](https://codepen.io/peggy0419/pen/zYQYKaq) |
| 63 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/vYwYpeJ) |
| 64 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/eYaYVxG)|
| 65 | Mionne | [Codepen](https://codepen.io/neohyntw/pen/oNRNEVJ)|
| 66 | LiLiLiLi | [CodePen](https://codepen.io/jungang0414/pen/WNBNzGj) |
| 67 | 阿若 | [Codepen](https://codepen.io/skar5268/pen/NWVWYeX) |
| 68 | 秀 | [Codepen](https://codepen.io/Alyssa-CHEN-the-bashful/pen/oNRNJoB)|
| 69 | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/OJYJrXz) |
| 70 | suandme | [Codepen](https://codepen.io/su-su-the-sans/pen/OJYJqJV)
| 71 | JESS | [Codepen](https://codepen.io/-8412/pen/YzbzMQZ)|
| 72 | Mico | [Codepen](https://codepen.io/Mico-the-bold/pen/pomoMQX)|
| 73 | oldan | [Codepen](https://codepen.io/Enix-Chien-/pen/RwmNwbz)|
| 74 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/abrzbOj?editors=1100) |
| 75 | maru3096 | [Codepen](https://codepen.io/deamru/pen/YzbPzEz) |
| 76 | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/zYQYKvY) |
| 77 | ycyc_324 | [Codepen](https://codepen.io/YC-the-vuer/pen/LYoEVjQ) |
| 78 | Emma | [Codepen](https://codepen.io/huang_L/pen/NWVPxGy) |
| 79 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/mdYyPXa) |
| 80 | JIAWUN | [Codepen](https://codepen.io/wkasixgv-the-sasster/pen/BaeyWYr) |
| 81 | Jenny_7314 | [Codepen](https://codepen.io/Jenny_000/pen/WNBbEbM?editors=11) |
| 82 | Linfe | [Codepen](https://codepen.io/Linfe/pen/GRagOJV) |
| 83 | Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/mdYyqQV) |
| 83 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/XWwJVwm) |
| 84 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/eYamKNN)|
| 85 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/dyEPqXY)|
| 86 | Yini Chen | [Codepen](https://codepen.io/CYini/pen/XWwJxEp) |
| 87 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/mdYygjM)|
| 88 | 快樂小豬 | [Codepen](https://codepen.io/rtjowfyf-the-lessful/pen/PovqzGY)|
| 89 | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/pomJEvL)|
| 90 | yo0x0oy | [Codepen](https://codepen.io/Dayton-Hsieh/pen/QWRbOwj) |
| 91 | Sana | [Codepen](https://codepen.io/-Chouno/pen/JjqYWGx) |
| 92 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/xxNwLYN)|
| 93 |mike00712| [Codepen](https://codepen.io/buliyuil-the-animator/pen/wvbKYKy)|
| 94 | 勾小勻 | [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/pomjQYe) |
| 95 | Toung | [Codepen](https://codepen.io/Toung/pen/oNRjmKG)|
| 96 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/VwOeyWO)|
| 97 | 真真瑋瑋 | [Codepen](https://codepen.io/Yujhen-Li/pen/abrdrLo?editors=1100) |
| 98 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/bGypvOP)|
| 99 | hsiu8767 |[Codepen](https://codepen.io/hsiu8767/pen/BaeKEGj) |
| 100 | sunknight_002 |[Codepen](https://codepen.io/aqortatm-the-solid/pen/xxNVNwM) |
| 101 | Frank Chiang |[Codepen](https://codepen.io/frankchiang/pen/MWdeYJb) |
| 102 | flyingcatman5487 |[Codepen](https://codepen.io/ysklpokt-the-looper/pen/zYQrWwN) |
| 103 | haojing |[Codepen](https://codepen.io/hjxu/pen/dyEpgGw?editors=1100) |
| 104 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/JjqRzOd) |
| 105 | Aasta | [Codepen](https://codepen.io/Aasta-the-typescripter/pen/xxNEBpb?editors=1100) |
| 106 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/xxNEoQZ) |
| 107 | Eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/mdYOGGj)|
| 108 | tzhengliin(子恆) | [Codepen](https://codepen.io/tzhengliin/pen/WNBoqbj)
| 109 | Kai | [Codepen](https://codepen.io/imkaikai9997874/pen/mdYREWV?editors=1100) |
| 110 | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/YzbNYEx) | |
| 111 | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/jOoBmxb)
| 112 | emmayo | [Codepen](https://codepen.io/emmayo/pen/GRaWEyp) |
| 113 | Taiwanno1 | [Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/XWwaaPx?editors=1100) |
| 114 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/dyEVaLp?editors=1100) |
| 115 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/xxNPExL) |
| 116 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/yLWPbGR) |
| 117 | ChrisLin | [CodePen](https://codepen.io/vllzfzco-the-reactor/pen/GRaQydX) |

<!--【快速複製】
| | user | [Codepen]() | |
| ----------- | --- |
-- >

00