仿畢卡索畫作

任務開始出現稀奇古怪的設定，連畢卡索的畫都出來了，看的出來上面是三個人在表演樂器嗎！一起努力完成吧！

定位 (position)

在屋子中等待爺爺的時候，感受時間的流逝特別緩慢，屋子一角的螞蟻常常成為我的觀察對象，它們在生態系中扮演著自己的角色，稱為「生態棲位」，如同人們在這個社會上的位置一樣，但如果想打破現狀到前往更高的位置就會將其他的人擠下來，或者是，扮演著被擠下來的那個。

CSS對於頁面上的定位，在之前的任務中用到有兩種：

• 藉由box-model的特性，設定margin與padding將內容固定在想要的位置。
• 父層設定flex彈性盒，利用主軸與交錯軸的排列(justify-content與align-items)，一次對齊。

而這次仿畢卡索的畫作這一任務，用的是position。

position

這個CSS屬性有不同的值，預設為static；設定完這個屬性之後，需要透過上下左右來定位。

• position: static;
  靜止定位： 使用正常的布局方式，此時top、bottom、left、right無效

• position: relative;
top: 40px; left: 30px;
  相對定位： 在"當前"位置往下40px，往右30px。
  *top表示與最上方的距離，同樣地left表示與最左邊的距離

• position: absolute;
top: 40px; left: 30px;
  絕對定位： 脫離當前的位置布局(normal flow)，找到position非static的父層，以他的位置往下40px，往右30px

• position: fixed;
top: 40px; left: 30px;
  固定定位： 脫離當前的位置布局，直接指定在瀏覽器的空間，固定在往下40px，往右30px的位置。(就算往下往右捲動，視覺位置也不跟著變)

• position: sticky;
top: 40px; left: 30px;
  黏性定位： 脫離當前的位置布局，根據最近的一個可以捲動的父元素，固定在往下40px，往右30px的位置。(簡單說明效果就如同鐵人幫的nav-bar，捲軸往下時區塊會跟著網頁往上，但碰到最頂端時會黏在上面，不會跟著消失)

想了解更多：前端之"wow~原來是這樣啊" - position by Lai

下一篇：棲位(下)

引用與資源：
freecodecamp
mdn_web_docs_Position
我的仿畢卡索畫作