---
# System prepended metadata

title: "\U0001F3C5 5/9(一) 每日切版任務 - position 練習"
tags: [公益程式體驗營 - 2022]

---

---
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 -->