今天要來繼續介紹CSS的佈局

定位 Positioning

定位（Positioning）是CSS中一種重要的佈局技術，它允許你精確地控制元素在網頁中的位置，在這之中，需要先瞭解一下CSS中定位的幾種主要屬性和值

position屬性

這是定位的核心屬性，用於指定元素的定位方式，他有五種值

• static:元素使用正常文檔流的位置。定位是默認值，通常用於大多數網頁元素，特別是普通文本、圖片和一般內容區塊。這些元素根據正常文檔流排列，不進行特殊定位。

• relative:元素相對於其正常位置進行定位，但仍占據原始位置的空間。relative 定位常用於微調元素的位置。它可以用於創建具有較小位移的元素，例如圖片的微調位置、圖片上的標籤、文本方塊的調整等。它不會從正常文檔流中移除，仍然占據原始位置的空間

• absolute：元素相對於其最近的已定位祖先（父元素或更高級的祖先）進行定位。常用於創建浮動元素、對話框、覆蓋層、下拉菜單等，這些元素需要精確控制其位置，並且通常相對於父元素進行定位。它會從正常文檔流中移除，不占據原始位置的空間。

• fixed：元素相對於視口進行定位，即使頁面滾動，元素位置也不變。fixed 定位通常用於創建固定在螢幕上的元素，例如，側邊的廣告、最上方的導覽頁、還有回到最上面的按鈕等。

• sticky：元素相對於其最近的滾動容器或視口進行定位，當滾動達到指定位置時，元素會固定在屏幕上。就像有些網站的最上面會有選單，當你往下滑之後仍會保留在畫面的最上面。

當初在學的時候覺得fixed和sticky基本上是同樣的東西，看不出差別。
的確，fixed和sticky都用於實現元素在頁面中的固定定位，但它們之間有一些重要的差別，主要是在滾動行為方面的不同。

fixed無論如何都會一直跟著畫面固定在某個位置，但sticky不會，stink的定位置隨著卷軸移動的，一旦sticky的所在的那一層超過了卷軸所顯示的畫面位置，sticky就會消失。

top、right、bottom、left

首先，top、right、bottom、left這四個屬性通常與position搭配使用，但對其中的static無效

1.top 屬性：top 用於指定元素的上邊緣（top edge）相對於其包含元素（通常是父元素）的上邊緣的距離。如果 position 屬性設置為 relative、absolute 或 fixed，則 top 的值可以是正數、負數或百分比。正數表示元素向下移動，負數表示元素向上移動，百分比表示相對於包含元素的百分比位置。

2.right 屬性：right 用於指定元素的右邊緣（right edge）相對於其包含元素的右邊緣的距離。與 top 類似，如果 position 屬性設置為 relative、absolute 或 fixed，則 right 的值可以是正數、負數或百分比。正數表示元素向左移動，負數表示元素向右移動，百分比表示相對於包含元素的百分比位置。

3.bottom 屬性：bottom 用於指定元素的下邊緣（bottom edge）相對於其包含元素的下邊緣的距離。同樣，如果 position 屬性設置為 relative、absolute 或 fixed，則 bottom 的值可以是正數、負數或百分比。正數表示元素向上移動，負數表示元素向下移動，百分比表示相對於包含元素的百分比位置。

4.left 屬性：left 用於指定元素的左邊緣（left edge）相對於其包含元素的左邊緣的距離。和前面的屬性一樣，如果 position 屬性設置為 relative、absolute 或 fixed，則 left 的值可以是正數、負數或百分比。正數表示元素向右移動，負數表示元素向左移動，百分比表示相對於包含元素的百分比位置。

在第二篇介紹佈局的文章中介紹了CSS position 屬性的五種主要值以及 top、right、bottom 和 left 屬性的作用。這些屬性是網頁設計中關鍵的定位工具，使我們能夠精確控制元素的位置和布局。理解它們將有助於提升你的網頁設計技能。
在未來的文章中，我們將繼續探討更多有關 CSS 佈局的主題，以幫助你更好地設計和排列網頁元素。如果您有任何問題或需要進一步的幫助，請隨時聯絡我們。謝謝閱讀！

參考資料:https://ithelp.ithome.com.tw/articles/10253500