測試你的技能：定位

本技能測試的目的是評估您是否理解 CSS 中的定位，使用 CSS position 屬性和值。您將完成兩個使用剛剛學習的材料的不同元素的小任務。

注意：您可以在本頁面的互動式編輯器中或線上編輯器（如 CodePen、JSFiddle 或 Glitch）中嘗試解決方案。

如果您遇到困難，可以在我們的 溝通渠道 中聯絡我們。

任務 1

在本任務中，我們希望您將具有 target 類別的專案定位到具有 5px 灰色邊框的容器的頂部和右側。

最終結果應與以下影像類似

The green box is at the top right of a container with a grey border.

嘗試更新下面的即時程式碼以重新建立完成的示例

附加問題

  • 作為額外的挑戰，您可以將目標更改為顯示在文字下方嗎？

下載此任務的起點，以便在您自己的編輯器或線上編輯器中工作。

任務 2

在本任務中，如果您滾動以下示例中的框，側邊欄會隨著內容一起滾動。將其更改為側邊欄保持在原位，只有內容滾動。

The content is scrolled but the sidebar has stayed in place.

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點，以便在您自己的編輯器或線上編輯器中工作。