--- tags: 公益程式體驗營 - 2022 --- # 🏅 5/9(一) 每日切版任務 - position 練習 ## 問題 * 用 Codepen 練習將三個 box (各別是 300px*300px 、 200px*200px 、 100px*100px) 用 position 語法將 box 放置如圖所示位置: ![](https://i.imgur.com/qCSFFEK.png) ![](https://i.imgur.com/CWwSyVg.png) <!-- ans: [position](https://codepen.io/DoLucky/pen/JjpdxGe) --> --- ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： --> 回報區 --- <!-- 1. yunyun#5215 解答： Codepen：https://codepen.io/yun_yunni/pen/BaYjEGM --> <!-- 2. JackC#0411 Codepen : https://codepen.io/key0329/pen/mdXVgQj?editors=1100 --> <!-- 3. CloThEs 解答： Codepen：https://codepen.io/bogwdnxx-the-sans/pen/qBxbwgP --> <!-- 4. Art 解答： Codepen：https://codepen.io/ss97202tw/pen/ZErQNzp --> <!-- 5. Aaron Codepen : https://codepen.io/narrowd4c/pen/xxYbPxV?editors=1100 --> <!-- 6. Bruno Yu Codepen : https://codepen.io/bruno-yu/pen/VwQeNVQ --> <!-- 7. bonnieli1414#4906 Codepen : https://codepen.io/bonnieli1414/pen/qBxbGbo --> <!-- 8. Joyce#3790 Codepen : https://codepen.io/joycehuang/pen/eYVJaOB?editors=1100 --> <!-- 9. Jason Chen Codepen : https://codepen.io/jason60810/pen/ExQPzYX --> <!-- 10. hw#0715 Codepen： https://codepen.io/Lhwei/pen/vYdLwyv --> <!-- 11. kc_tw#8242 Codepen: https://codepen.io/kcwang-tw/pen/jOZWoWb --> <!-- 12. Jenny_ Codepen: https://codepen.io/DoLucky/pen/JjpdxGe?editors=1100 --> <!--13. 炎炎#0777 Codepen: https://codepen.io/kimyen260/pen/yLveWzM --> <!--14. Tori#1287 Codepen: https://codepen.io/FlyTori/pen/XWZXwZV --> <!--15. Chaco#2993 Codepen: https://codepen.io/chaco-wang/pen/BaYjePo --> <!--16. Rex Chu Codepen: https://codepen.io/rex_chu/pen/JjpGVxy --> <!--17. rejennylo Codepen: https://codepen.io/reJennylo/pen/YzewbvM --> <!--18. xuan#0808 Codepen: https://codepen.io/xuan0915/pen/dydGEea?editors=1100 --> <!--19. Katie Codepen: https://codepen.io/Katie24/pen/mdXVYKN --> <!--20. Nina泥#1422 codepen: https://codepen.io/xiangqi09020/pen/wvyMbRG --> <!-- 21. JustinLiu Codepen: https://codepen.io/justin0227/pen/abqdrEG?editors=1100 --> <!-- 22. LHchien https://codepen.io/lin_chien/pen/VwQeJwo?editors=1100 --> <!-- 23. LHchien https://codepen.io/qnrxylcw-the-reactor/pen/wvyMLag --> <!--24. Knn#0492 codepen: https://codepen.io/Knn_84/pen/gOvPNPr --> <!--25. Noy https://codepen.io/MochiCodingPen/pen/LYQGKPv --> <!--26. 楓之聲#6945 codepen: https://codepen.io/sshane258/pen/JjpGQdz --> <!-- 27. su#7798 codepen: https://codepen.io/wc-su/pen/wvyMZmR --> <!-- 28. RJRS#0930 codepen: https://codepen.io/RJRS/pen/bGLEPeW --> <!-- 29. Peng https://codepen.io/peng-027/pen/MWQKMpX --> <!-- 30. 眠瀾#8857 CodePen：https://codepen.io/laron9486/pen/yLvedyp --> <!-- 31. NaRa#7954 CodePen：https://codepen.io/chou-nara/pen/ExQPzBe --> <!-- 32. Eric.S Codepen：https://codepen.io/Eric_Shen/pen/Yzewoxy --> <!-- 33. Yuhung#1391 Codepen: https://codepen.io/Yu__hung/pen/VwQeJWL --> <!-- 34. kuo Codepen: https://codepen.io/sunny-sun/pen/oNEbROO --> <!-- 35. Jie Du Codepen: https://codepen.io/qgqonost-the-flexboxer/pen/qBxbzVW?editors=1100 --> <!-- 36. Tuhacrt#0008 Codepen: https://codepen.io/Tuhacrt/pen/PoQZrem --> <!-- 37. Greta#0837 Codpen: https://codepen.io/gretali/pen/ZErQdMw --> <!-- 38. Mitour#0672 codepen https://codepen.io/mitour/pen/wvyMLRp --> <!-- 39. shiaohan#0676 codepen https://codepen.io/shiaohan/pen/WNMrqLJ --> <!-- 40. Cheng-Yu#1813 codepen https://codepen.io/ball77111/pen/xxYZoMb --> <!-- 41. yuyu#6310 codepen https://codepen.io/yuyu0905/pen/poagXrV --> <!-- 42. Lemon codepen https://codepen.io/shumhoyin/pen/bGLEPyM --> <!-- 43. Cliff https://codepen.io/Cliff_hex/pen/LYQGKmE --> <!-- 44. andersonshen#4675 https://codepen.io/luxyenni-the-bold/pen/vYdLoOZ --> <!-- 45. Cynthia1111 https://codepen.io/Cynthia1111/pen/gOvPVPo --> <!-- 46. rubyruby https://codepen.io/Ruby0831/pen/NWyxQNO --> <!-- 47.IreneLee CodePen:https://codepen.io/ntjtcxpt-the-animator/pen/oNEbKbY?editors=1100 --> <!--48. Jamie https://codepen.io/Wu220103/pen/JjpGGzM --> <!-- 49. Hao#2485 https://codepen.io/hao216/pen/bGLEPao --> <!-- 50. RyanLu#3642 https://codepen.io/ryanlu1125/pen/mdXVZZw?editors=0100 --> <!-- 51. Vera#5592 https://codepen.io/skvera/pen/zYRrgPq --> <!-- 52. Josh Chen#4552 https://codepen.io/hiphop825/pen/abqdeap?editors=1100 --> <!-- 53. 翁來#9380 https://codepen.io/wguo8320/pen/LYQGwgz --> <!-- 54. Erica Chen#6929 https://codepen.io/ericachen/pen/RwQrzqK --> <!-- 55. shujhen#7734 Codepen：https://codepen.io/shujhen/pen/poagXxx --> <!-- 55. Arvin#6347 Codepen：https://codepen.io/family929317/pen/xxYZyqW https://codepen.io/Adif/pen/jOZWgao?editors=1100 <!-- 56. Murmurline#6969 Codepen：https://codepen.io/murmurline/pen/mdXPbRo --> <!-- 57. Beanhuang Codepen：https://codepen.io/Beanhuang/pen/JjpXPZa --> <!-- 58. 肉桂卷#0625 Codepen：https://codepen.io/ginnlee/pen/bGLpbLV?editors=1100 --> <!-- 59. ms_kellychen#6947 Codepen: https://codepen.io/KC1090901_W/pen/KKQzPMz --> <!-- 60. EG#7172 codepen: https://codepen.io/paneg-jpeg/pen/PoQNYWr --> <!-- 61. Charlotte Lee codepen: https://codepen.io/charlotte-lee/pen/QWQNLev?editors=0100 --> <!-- 62. SASIMI #5099 codepen: https://codepen.io/sashimi1327/pen/PoQNoKW --> <!-- 63. Nini Chen#5790 codepen: https://codepen.io/ninistyle/pen/QWQNLpy?editors=1100 --> <!-- 64. Nini 花禮湖燒#7359 codepen: https://codepen.io/lai-pei/pen/poayvzq --> <!-- 65. Stanley#3825 codepen: https://codepen.io/sean_1215/pen/RwQaNpj --> <!-- 66. 阿基基 codepen: https://codepen.io/JIJI_GNI/pen/poayopK --> <!-- 67. ajhappy#6488 codepen: https://codepen.io/ajhappy5438/pen/JjpXoVy --> <!-- 68. lyle#8123 codepen: https://codepen.io/tomys/pen/bGLpNXP --> <!-- 69. Chaoci#2460 codepen: https://codepen.io/gmailchao/pen/NWyNqoR --> <!-- 70. EVC#1876 codepen: https://codepen.io/elvi-chuang/pen/MWQywzv --> <!-- 71. Chi Codepen:　https://codepen.io/YoChi84/pen/qBxZOBv --> <!-- 72.hsiuhsiu#7412 Codepen:　https://codepen.io/hsiuhsiu/pen/QWQNwBX --> <!-- 73.Dun Dun#9857 Codepen:　https://codepen.io/dundun/pen/wvyGKYP --> <!-- 74. Alphacostankion#8475 Codepen: https://codepen.io/alphapolo/pen/VwQavde --> <!-- 75. yen#5757 Codepen: https://codepen.io/TZU-HUANG-YEN/pen/NWyNGbg --> <!-- 76. color#4378 Codepen: https://codepen.io/color0602/pen/oNExbjz --> <!--77.Tsuei#9284 https://codepen.io/AlbertoLL/pen/MWQyKoN --> <!--78.RayChen#6088 https://codepen.io/raychen1996/pen/vYdGLJW --> <!-- 79. Van.CS #2067 codepen: https://codepen.io/fbacojji-the-selector/pen/vYdGNzX --> <!--80. LCC#9012 codepen:https://codepen.io/pamelaxchun/pen/XWZdXvp --> <!--81. deveryone#8090 codepen:https://codepen.io/raycheng/pen/mdXPPJQ --> <!--82. HiyukiOuO # 8072 codepen:https://codepen.io/Befei/pen/jOZqqbP --> <!--83. Ryan Chen#3338 codepen:https://codepen.io/RyanTP/pen/LYQNNLr --> <!--84. 小七拿鐵#9255 codepen:https://codepen.io/loqqikul-the-vuer/pen/MWQKMJX --> <!--85. Arista codepen:https://codepen.io/arista-hsieh/pen/RwQaRPN --> <!--86. TunacanBoy#2206 https://codepen.io/JamesDesign/pen/xxYVVNy --> <!--87. mei#8421 https://codepen.io/Shila-Chen/pen/jOZqqgm --> <!--88. Yi#2702 https://codepen.io/yic1823/pen/BaYjQja --> <!--89. Jumpye#8601 https://codepen.io/Jumpye/pen/mdXPEOV?editors=1100 --> <!--90. KuoMin#4931 https://codepen.io/KuoMin/pen/OJQNXbb --> <!-- 91.Lina Chen https://codepen.io/LinaChen/pen/yLvOJJv --> <!-- 92. Triple https://codepen.io/riku30/pen/QWQNEjg --> <!-- 93.WilliamChou#7375 https://codepen.io/williampo78/pen/VwQaKwm --> <!-- 94.君Jyun#0147 https://codepen.io/Okaybeok/pen/vYdGXvR --> <!-- 95. muzz #0345 https://codepen.io/yunnnz/pen/gOvrLbZ--> <!-- 96.Jim#8764 https://codepen.io/jim255060/pen/poayNby --> <!-- 97.小鹿Kerwin#5730 https://codepen.io/tkoleo84119/pen/MWQyjPY --> <!-- 98. will0708#7730 https://codepen.io/ncrdpepc-the-lessful/pen/XWZdNee?editors=1100 --> <!-- 99. Mylène codepen:https://codepen.io/hamajibashi/pen/LYQNRgj --> <!-- 100. Shang#9066 codepen:https://codepen.io/shang1104/pen/BaYKQMo --> <!-- 101. 艾芮絲#6060 codepen:https://codepen.io/wangyingju/pen/poayNYw --> <!-- 102. 米金#1399 https://codepen.io/ihrowjtq-the-vuer/pen/OJQNboP --> <!-- 103. Muse#9741 codepen:https://codepen.io/mu24/pen/PoQNbwV --> <!-- 104. 安安你好你是誰#7416 codepen:https://codepen.io/leave3310-the-looper/pen/OJQNWLM --> <!-- 105. Carrie#2750 codepen:https://codepen.io/carrie-wang/pen/ZErWBdv --> <!-- 106. ChaoChao https://codepen.io/EmiiilyJ/pen/dydMOQa --> <!-- 107. 白狐 Codepen：https://codepen.io/baihu7851/pen/yLvOgwQ --> <!-- 108. WeiKai Codepen: https://codepen.io/beginneraboutlife116/pen/OJQNpPz --> <!-- 109. kk28976328#1197 Codepen: https://codepen.io/kk28976328/pen/eYVZdrN --> <!-- 110. Raymond Lam#0344 Codepen: https://codepen.io/manshun-lam/pen/zYRqZqY --> <!-- 111. amy芳#1385 Codepen: https://codepen.io/amy-chieng/pen/poayeyG --> <!-- 112. Data#9297 Codepen: https://codepen.io/kirakira72/pen/JjpGKBY --> <!-- 113. Patti Chiu Patti#7774 https://codepen.io/peiru-qiu/pen/jOZqBZR --> <!-- 114. _Evan伊凡 Codepen：https://codepen.io/Evan_9837/pen/jOZqBoN --> <!--115.菟小歆#2154 https://codepen.io/catmoon1017/pen/ZErWKxy?editors=1100--> <!--116. LYC#5516 Codepen：https://codepen.io/chi-yen/pen/gOvrWJb --> <!--117. 黑松胖#4836 Codepen: https://codepen.io/yi-chien-hsieh/pen/NWyNbgq --> <!--118. RubyChang#9741 Codepen: https://codepen.io/Ruby-Chang/pen/bGLpRZa --> <!--119. 小不點#1793 Codepen: https://codepen.io/fwmfmgkx-the-flexboxer/pen/mdXPpaL --> <!--120. 諾拉#4800 Codepen: https://codepen.io/Naomi_riayun/pen/rNJeJaM --> <!--121. 隔壁小王 Codepen: https://codepen.io/stevetanus/pen/XWZdEWq --> <!--122. Easton#3863 Codepen: https://codepen.io/EastonIsCodingNow/pen/ExQKEwr --> <!--122. Lyndon#6018 Codepen: https://codepen.io/DoLucky/pen/JjpdxGe --> <!--124. Kiwi#9804 Codepen: https://codepen.io/kiwi1113/pen/YzeqaNz --> <!-- 125. danny123 codepen: https://codepen.io/binlandz123/pen/BaYKxRx?editors=1100 --> <!-- 126. Jill#5577 CodePen: https://codepen.io/Jillkate/pen/xxYVjjE --> <!-- 127. Jan F#7277 CodePen: https://codepen.io/Jan-F/pen/RwQaJZE?editors=1100 --> <!-- 128. AllenLi#6756 CodePen: https://codepen.io/knsybndf-the-animator/pen/poayVOM?editors=1100 --> <!-- 129. ton#8977 CodePen: https://codepen.io/tonhan/pen/QWQNBxa --> <!-- 130. Bao#4997 CodePen: https://codepen.io/baoh/pen/wvyGEGm?editors=1100 --> <!-- 131. 鉦勝#8333 CodePen: https://codepen.io/atckmax823/pen/gOvrdyd --> <!-- 132. 雷雷#7844 CodePen: https://codepen.io/lei-yi-jie/pen/abqNRVV --> <!-- 133. 肉桂捲好好ㄘ#7885 Codepen : https://codepen.io/viviii_/pen/yLvOQLo --> <!--134. How#5806 Codepen: https://codepen.io/howtobefine/pen/LYQNgKX --> <!-- 135.ozawa#8815 https://codepen.io/PIN-HSIN/pen/VwQaqvK --> <!-- 136. Leo Song Codepen: https://codepen.io/sunnylaba/pen/GRQZLoE --> <!-- 136. 狸貓#9725 Codepen: https://codepen.io/leeemo/pen/eYVZaRg --> <!-- 137. Marco Yin #2673 Codepen:https://codepen.io/Marcoyin/pen/BaYKgNj?editors=1100 --> <!-- 138. Jia-Hong Chen#3863 Codepen:https://codepen.io/iloveleon19/pen/XWZdLKY --> <!-- 139. Ning#6363 Codepen:https://codepen.io/fangninglin/pen/jOZqgwQ --> <!-- J_u_d_y#5993 Codepen: https://codepen.io/J_u_d_y/pen/WNMwqWM?editors=1100 --> <!--141. Ayre #0016 Codepen: https://codepen.io/yichunlin09/pen/gOvrVNj --> <!--142. skypassion5000#4151 Codepen: https://codepen.io/skypassion5000/pen/KKQMPoz?editors=1100 --> <!--142.雨天晴#2577 Codepen:https://codepen.io/aporitzp-the-vuer/pen/ZErOEBr?editors=0100 --> <!--143.ling chang#1024 Codepen:https://codepen.io/ling-chang/pen/LYQZYpM --> <!--143.邊邊#2293 Codepen:https://codepen.io/WinnieTsao/pen/vYdKYOq?editors=1100 --> <!--144.Vicky Chang#8846 Codepen: https://codepen.io/cychang/pen/XWZKROe?editors=1100 --> <!--145.jada1109 #8756 Codepen:https://codepen.io/jada1109/pen/BaYzdOV?editors=1100 --> <!--146. EllieLo #9809 Codepen:https://codepen.io/ellie-lo/pen/XWZKawm --> <!-- 147. yuling Codepen:https://codepen.io/igzdflpu/pen/MWQeVjE --> <!-- 148. yoyo123456#0577 Codepen:https://codepen.io/hungyoyo/pen/ExQyMgL?editors=1100 --> <!-- 149. Cheng#3012 codepen:https://codepen.io/XiBinCheng/pen/MWQeRjP --> <!-- 150. H2CO3#7232 codepen:https://codepen.io/guan-zhen-wang/pen/qBxNvpg --> <!-- 151. yutingHsieh#0950 codepen:https://codepen.io/HsiehYuTing/pen/vYdXEGG --> <!-- 152. 大衛 codepen:https://codepen.io/exnsrpjc/pen/vYdXEQm --> <!-- 151. 黑白兔#0684 codepen:https://codepen.io/johnny329/pen/RwQGpNr --> <!-- 152 Lian CHen codepen:https://codepen.io/CCL1007/pen/ZErpeNd --> <!-- 153 Lao#4012 codepen:https://codepen.io/rao418065/pen/xxYEdOE --> <!--154 嘟嘟莉#2170 codepen:https://codepen.io/nicki202204/pen/BaYLYNV --> <!--155 Abel codepen:https://codepen.io/lun_chi/pen/vYdXQJP --> <!--155 Susan8402#5854 codepen:https://codepen.io/Susan8402/pen/poaEYNE?editors=1100 --> <!--156 zera#6060 codepen : https://codepen.io/zera-tseng/pen/OJQRGvg --> <!-- 157. Mojito#6002 codepen: https://codepen.io/vu3xk41997/pen/BaYLgQB --> <!-- 158.阿風#6890 codepen: https://codepen.io/Afong-Wind/pen/xxYRxGP --> <!-- 159. 家洋#6999 codepen:https://codepen.io/yang940648/pen/wvyoBGg --> <!-- 160. 靜宜#6866 codepen:https://codepen.io/jamie18/pen/ExQNmMZ --> <!-- 161.singend#0876 codepan:https://codepen.io/singend/pen/wvyodRN --> <!-- 162. 小羅#9921 codepan:https://codepen.io/peizhen0609/pen/BaYQwQx --> <!-- 163. TAKO#3277 codepan:https://codepen.io/TAKOBEA/pen/GRQNyZp --> <!-- 164. Keh#6805 codepan:https://codepen.io/keiko08/pen/ExQNQey --> <!-- 165. Cora #3153 codepan:https://codepen.io/coracola/pen/BaYQvgw --> <!-- 166. Lynn73 #3164 codepan:https://codepen.io/LYNN0703/pen/bGLBZJE --> <!-- 167. Sussu#4211 codepan:https://codepen.io/yatiti84/pen/YzeqNjq --> <!-- 168. Jean codepan:https://codepen.io/jean-liu/pen/BaYpKYx --> <!-- 169. judy0927#4241 codepan:https://codepen.io/judycxc/pen/LYQxRbq --> <!-- 170. Renad#0242 Codepen：https://codepen.io/ruby-teng/pen/JjpERaq --> <!-- 171. Zoey#0839 Codepen：https://codepen.io/zoec/pen/vYdgJXq --> <!-- 172. Zooey#6634 Codepen： https://codepen.io/noraneko0430/pen/eYVgMVB?editors=1100 --> <!-- 173. YC#2008 Codepen: https://codepen.io/danisternburg/pen/zYRNQYe?editors=1100 --> <!-- 174. Vito#7797 https://codepen.io/Vito_Yang/pen/GRQWKbQ --> <!--175. Sophia19#4005 Codepen： https://codepen.io/sophia019/pen/PoQpZvG --> <!--176. 果凍#0374 Codepen： https://codepen.io/pbhdzjdb-the-bashful/pen/wvyJgyO --> <!--176. CHIA#3031 Codepen： h[ttps://codepen.io/pbhdzjdb-the-bashful/pen/wvyJgyO](https://codepen.io/chiachiaD/pen/mdXOWVJ?editors=1100) --> <!--178. yuki#9465 Codepen： https://codepen.io/yukilin549/pen/rNJmaRd --> <!--179. yuki#9465 Codepen： https://codepen.io/pen/?editors=1100 --> <!--180. AmberC#1372 Codepen： https://codepen.io/AmberChuang/pen/poaeqEE --> <!--181. Ben Kao#3066 Codepen： https://codepen.io/Ben-Kao0311/pen/XWZRgPd --> <!--182. Georgina#9761 Codepen： https://codepen.io/9gina/pen/NWyjaEX?editors=1100 --> <!--183.CrystalD#6007 Codepen: https://codepen.io/Crystaldu/pen/GRQERaG --> <!--184.拿鐵#7585 Codepen:https://codepen.io/qinsplanet1024/pen/ZEryWer --> <!-- 185.Newman [Codepen](https://codepen.io/newmankz/pen/PoQjboo) --> <!--186.piha#9987 Codepen:https://codepen.io/pihahaha/pen/JjpyNgV --> <!--187. JessieCho Codepen:https://codepen.io/jessieCho/pen/VwQzOJo --> <!--188. Yurii#7455 Codepen:https://codepen.io/Yurii-Wen/pen/PoQJbbv?editors=1100 --> <!--188. jiajiajiahou#5229 Codepen:https://codepen.io/chia-chia-hou/pen/ExQwprB <!--189. bakiii https://codepen.io/aki168/pen/YzergXo --> <!--190. vivian#9511 codepen:https://codepen.io/Vivianliuu/pen/mdXqeQE?editors=1100 --> <!--191. jing#6810 codepen: https://codepen.io/jing2357/pen/GRQOwxp --> <!--192. Eileen#6454 codepen: https://codepen.io/Eileen-io/pen/KKQybgB --> <!-- 193. Barret#1119 codepen: https://codepen.io/barret0720/pen/rNJraJm --> <!-- 194. Choo.Ku codepen: https://codepen.io/chooku/pen/RwQBozG?editors=0100 --> <!-- 195 JOU#6876 codepen: https://codepen.io/joujoujou924/pen/jOZvRvN -->