---
# System prepended metadata

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

---

---
tags: 公益程式體驗營 - 2022
---

#  🏅 5/17(二) 每日切版任務 - position 趣味小練習
## 題目 

* 用 Codepen 練習以下畫面，目前提供相關資訊(如圖所示)，其餘尺寸請自行計算。

![](https://i.imgur.com/9I7b2tr.png)
![](https://i.imgur.com/UNRUyMc.png)





<!--
ans:
position](https://codepen.io/DoLucky/pen/yLvaydW?editors=1100)
-->
---

## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  -->

回報區
---

<!-- 1.IreneLee codepen:
-->

<!-- 2. CloThEs
Codepen：l
-->

<!-- 3. Bruno Yu
Codepen：w
-->

<!-- 4. yunyun
Codepen：https://codepen.io/yun_yunni/pen/wvygZMa
-->

<!-- 5. JackC
Codepen：https://codepen.io/key0329/pen/vYdgMYb
-->

<!-- 6. su#7798
codepen: https://codepen.io/wc-su/pen/oNEBOxQ
-->

<!-- 7. Jenny_
codepen: https://codepen.io/Jenny_000/pen/eYVgoYR
-->

<!-- 8. 阿基基
https://codepen.io/JIJI_GNI/pen/wvygZKa 
-->

<!-- 9. hw#0715
https://codepen.io/Lhwei/pen/BaYpEmK 
-->

<!-- 10. Jason Chen
https://codepen.io/jason60810/pen/GRQrLvR
-->

<!-- 11. Muse#9741
codepen: https://codepen.io/mu24/pen/bGLgJLB
-->

<!-- 12. 翁來#9380
codepen: https://codepen.io/wguo8320/pen/abqpxjQ
-->

<!-- 13. Bao #4997
codepen: https://codepen.io/baoh/pen/zYRNXyM?editors=1100
-->
<!-- 14. han #9437
Codepen：https://codepen.io/qnrxylcw-the-reactor/pen/mdXRYPO
-->

<!-- 15. Lemon
Codepen：https://codepen.io/shumhoyin/pen/JjpEVoZ
-->

<!-- 16. 楓之聲#6945
Codepen:https://codepen.io/sshane258/pen/JjpEqdg  
-->

<!-- 17. JustinLiu
Codepen: https://codepen.io/justin0227/pen/MWQJdKP?editors=1100
-->

<!-- 18. Cliff
https://codepen.io/Cliff_hex/pen/RwQKaZg 
-->

<!-- 19.Noy
https://codepen.io/MochiCodingPen/pen/JjpEqWj
-->

<!--20. will0708#7730
https://codepen.io/ncrdpepc-the-lessful/pen/QWQdRYz?editors=1100
-->

<!-- 21. Hao#2485
 https://codepen.io/hao216/pen/poaRmGB
-->

<!-- 22. RJRS#9430
 https://codepen.io/RJRS/pen/NWydZNJ
-->

<!-- 23. Tori#1287
 https://codepen.io/FlyTori/pen/vYdgqLp
-->

<!-- 24. LHchien
https://codepen.io/lin_chien/pen/vYdxBKK?editors=1100
 -->

<!-- 25. yuyu#6310
https://codepen.io/yuyu0905/pen/poaRBBa?editors=1100
 -->
 
 <!-- 26. Katie
https://codepen.io/Katie24/pen/bGLgPYy
 -->


https://codepen.io/Adif/pen/ExQZBVy?editors=1100





<!-- 27. Stanley#3825
https://codepen.io/sean_1215/pen/WNMRqdV
 -->

<!-- 28. Lyndon#6018    
https://codepen.io/jvvkahjx-the-lessful/pen/MWQJMPe
 -->
 
 <!-- 29. NaRa#7954   
https://codepen.io/chou-nara/pen/RwQKmmj
 -->
 
 <!-- 30. Raymond Lam#0344  
https://codepen.io/manshun-lam/pen/poaRXbz
 -->
 
<!-- 31. Peng
https://codepen.io/peng-027/pen/ZErLgxr
  -->
  
<!-- 32. Tuhacrt#0008
Codepen: https://codepen.io/Tuhacrt/pen/eYVgwZp
-->

<!-- 33. EG#7172
CodePen:
https://codepen.io/paneg-jpeg/pen/OJQWKjy
-->

<!-- 34. 眠瀾#8857
CodePen: https://codepen.io/laron9486/pen/yLvgmvz
-->

 <!-- 35. Chaoci#2460 
> codepen:https://codepen.io/gmailchao/pen/PoQWvLR
> -->

<!-- 36. kuo 
https://codepen.io/sunny-sun/pen/vYdgomq
 -->
 
 <!-- 37. How#5806 
https://codepen.io/howtobefine/pen/WNMpeeZ
 -->
 
<!-- 38. Joyce
  https://codepen.io/joycehuang/pen/ExQZqmR?editors=1100
-->

<!-- 39. Mylène
codepen: https://codepen.io/hamajibashi/pen/KKQaOOQ
-->


<!-- 40. Mitour#0672
https://codepen.io/mitour/pen/mdXWbrO 
-->

<!-- 41. 雷雷#7844
https://codepen.io/lei-yi-jie/pen/NWypKaY
-->

<!-- 42. 小不點#1793
https://codepen.io/fwmfmgkx-the-flexboxer/pen/XWZMWaj
-->

<!-- 43. Knn#0492
https://codepen.io/Knn_84/pen/WNMpbvr
-->

<!-- 44. Van.CS #2067
codepen: https://codepen.io/fbacojji-the-selector/pen/yLvMyYg 
-->

<!-- 45. ajhappy#6488
codepen: https://codepen.io/ajhappy5438/pen/bGLqNpV
-->

<!-- 45. 黑白兔#0684
codepen: https://codepen.io/johnny329/pen/ZEreEde 
-->

<!-- 46. #EVC1876
codepen: https://codepen.io/elvi-chuang/pen/YzeZzOj
 -->
 
 <!-- 47. Chaco#2993
codepen: https://codepen.io/chaco-wang/pen/RwQpNqN
 -->
 
 <!--48. Jamie
https://codepen.io/Wu220103/pen/ZErLgRx -->

 <!--49. lyle#8123
https://codepen.io/tomys/pen/JjpWYGE -->

 <!--50. Erica Chen#6929
https://codepen.io/ericachen/pen/NWypqyM
 -->
 
<!-- 51. 小天#7177
https://codepen.io/linyujing/pen/rNJyOJM
-->

<!-- 52. Josh Chen#4552
https://codepen.io/hiphop825/pen/xxYqwvY?editors=1100
-->

<!-- 53. RayChen#6088
https://codepen.io/raychen1996/pen/GRQWoKL
-->

<!-- 54. Cynthia1111
https://codepen.io/Cynthia1111/pen/ZEreQJa?editors=1100
-->

<!-- 55. bonnieli1414#4906
https://codepen.io/bonnieli1414/pen/GRQWZoj
-->

<!-- 56. Carrie#2750
codepen:https://codepen.io/carrie-wang/pen/vYdxLbE
-->

<!-- 57.HiyukiOuO # 8072
codepen:https://codepen.io/Befei/pen/jOZBWJG
-->

<!-- 57.WilliamChou#7375
codepen:https://codepen.io/williampo78/pen/ZEreWVd
-->

<!-- 58. 小鹿Kerwin#5730
codepen:https://codepen.io/tkoleo84119/pen/xxYqOER
-->

<!-- 59. 浪裡小白龍#6860
codepen:https://codepen.io/Emillo/pen/gOvmMZq?editors=1100
-->

<!-- 60. hsiehld#2395
codepen:https://codepen.io/hsiehld/pen/BaYWKgV
-->

<!-- 61. rubyruby
codepen: https://codepen.io/Ruby0831/pen/PoQpGwr
-->

<!-- 62. Triple
 https://codepen.io/riku30/pen/QWQpEjo -->
 
<!-- 63. hsiuhsiu
codepen: https://codepen.io/hsiuhsiu/pen/RwQpRxJ
-->

<!-- 64. Kiwi #9804
codepen: https://codepen.io/kiwi1113/pen/yLvMaBa
-->

<!-- 65. 黑松胖#4836
codepen: https://codepen.io/yi-chien-hsieh/pen/rNJyepg?editors=1100
-->

<!-- 66. Chi
Codepen: https://codepen.io/YoChi84/pen/VwQpKaq 
-->

<!-- 67. deveryone#8090
https://codepen.io/raycheng/pen/eYVvdvG?editors=1100
-->

<!-- 68. Easton#3863
Codepen: https://codepen.io/EastonIsCodingNow/pen/RwQpGom
-->
<!-- 69 singend#0876
https://codepen.io/singend/pen/jOZBVQQ
-->

<!-- 70 Omi#3467
https://codepen.io/chian0501/pen/RwQpKwj
-->

<!-- 71 ling chang#1024
https://codepen.io/ling-chang/pen/OJQpbyp
-->

<!-- 72 Jia-Hong Chen#3863
https://codepen.io/iloveleon19/pen/yLvMgBW
-->


<!-- 73 muzz #0345
 https://codepen.io/yunnnz/pen/mdXWREx-->
 
 <!-- 74 Vera#5592
https://codepen.io/skvera/pen/gOvmmEP
-->
 
 <!-- 75 amy芳#1385
https://codepen.io/amy-chieng/pen/oNEZZWQ
-->

 <!-- 76 andersonshen#4675
https://codepen.io/luxyenni-the-bold/pen/xxYqdRo
-->

<!-- 77. yen#5757
https://codepen.io/TZU-HUANG-YEN/pen/oNEZevy?editors=1100 -->

<!-- 78. Jean
https://codepen.io/jean-liu/pen/mdXWLeo -->

<!--79. TunacanBoy#2206
https://codepen.io/JamesDesign/pen/abqJGYj
-->

<!-- 80. Leo Song
https://codepen.io/sunnylaba/pen/vYdxroZ?editors=1100
-->

<!-- 81. 安安你好你是誰#7416
https://codepen.io/leave3310-the-looper/pen/RwQpewP?editors=1100
-->

<!-- 82. 花禮湖燒#7359
https://codepen.io/lai-pei/pen/NWypEde?editors=1100
-->

<!-- 82. Cheng-Yu#1813
https://codepen.io/ball77111/pen/QWQpzzp
-->

<!-- 83. 白狐
Codepen：https://codepen.io/baihu7851/pen/xxYqwGE
-->

<!-- 84. Vicky Chang#8864
Codepen:
https://codepen.io/cychang/pen/qBxrLmy?editors=1100
-->

<!-- 85.Ayre #0016
Codepen:https://codepen.io/yichunlin09/pen/QWQpXgo
-->

<!-- 86.RyanLu#3642
Codepen:https://codepen.io/ryanlu1125/pen/jOZBvZy
-->

<!-- 87.yuling
 Codepen:https://codepen.io/igzdflpu/pen/jOZBgKy
-->

<!-- 88. Mojito#6002
 codepen: https://codepen.io/vu3xk41997/pen/JjpNGVe
-->

<!-- 89. 諾拉#4800
 codepen: https://codepen.io/Naomi_riayun/pen/XWZRgeb
-->

<!-- 90. xuan#0808
 codepen: https://codepen.io/xuan0915/pen/jOZmGQx
-->

<!-- 91. skypassion5000#4151
 codepen: https://codepen.io/skypassion5000/pen/YzeVYrR?editors=1100
-->

<!-- 92. Dun Dun#9857 
codepen: https://codepen.io/dundun/pen/WNMjyxj
-->
<!-- 93. 鉦勝 #8333 
codepen: https://codepen.io/atckmax823/pen/JjpWbXg?editors=1100
-->

<!-- 94 J_u_d_y#5993
Codepen:https://codepen.io/J_u_d_y/pen/MWQmLjQ
-->

<!-- 95 SASIMI#5099
Codepen:
https://codepen.io/sashimi1327/pen/dydRXXX
-->

<!-- 96 weihsin#5643
Codepen:
https://codepen.io/weisin/pen/dydRNvp
-->

<!-- 97 Arista
Codepen:
https://codepen.io/arista-hsieh/pen/PoQjjrB
-->

<!-- 98 ChaoChao
https://codepen.io/EmiiilyJ/pen/XWZgEXQ
-->

<!-- 99 danny123
codepen:https://codepen.io/binlandz123/pen/MWQozXd
-->

<!-- 100 小羅#9921
codepen:https://codepen.io/peizhen0609/pen/GRQEzQJ
-->

<!-- 101 Lina Chen
Codepen: https://codepen.io/LinaChen/pen/VwQWNBd
-->

<!-- 102 AmberC#1372
Codepen:
https://codepen.io/AmberChuang/pen/XWZgwox?editors=1100
-->

<!-- 103 Greta#0837
Codepen: https://codepen.io/gretali/pen/xxYLxXx
-->

<!-- 104 Charlotte Lee
Codepen: https://codepen.io/charlotte-lee/pen/YzexwbJ?editors=1100
-->

<!--105 piha#9987
Codepen: https://codepen.io/pihahaha/pen/RwQLzea
-->

<!--106 JessieCho
Codepen: https://codepen.io/jessieCho/pen/zYRPJpO
-->

<!-- 107. shujhen#7734
Codepen：https://codepen.io/shujhen/pen/bGLqVNQ
-->

<!-- 108. 家洋#6999
Codepen:https://codepen.io/yang940648/pen/wvypvGa
-->

<!-- 109. Zera#6060
codepen: https://codepen.io/zera-tseng/pen/YzeYYgZ
-->

<!-- 110. mei#8421
codepen: https://codepen.io/Shila-Chen/pen/zYRpaNq
-->

<--111. CrystalD#6007
codepen:https://codepen.io/Crystaldu/pen/bGLLZGJ
-->

<!-- 112. EllieLo#9809
codepen: https://codepen.io/ellie-lo/pen/yLvvwQM
-->

<!-- 113. YC#2008
Codepen: https://codepen.io/danisternburg/pen/poaamEq?editors=1100
-->
<!-- 114. H2CO3#7232
Codepen:
https://codepen.io/guan-zhen-wang/pen/xxYWVbK?editors=1100
-->

<!-- 115. COLOR#4378
Codepen:https://codepen.io/color0602/pen/NWyYXKx -->

<!-- 116. Eileen#6454
Codepen:https://codepen.io/Eileen-io/pen/eYVLOoL -->

<!-- 117. Jumpye#8601
Codepen:https://codepen.io/Jumpye/pen/mdXGOJg?editors=1100 -->


<!-- 118. JOU#6876
https://codepen.io/joujoujou924/pen/qBxMzvb?editors=1100 -->

<!-- 119. Zoey#0839
https://codepen.io/zoec/pen/bGLOabW 
-->

<!-- 120. 艾芮絲#6060
Codepen: https://codepen.io/wangyingju/pen/MWQLbWR -->