CSS定位(positioning)的MDN文檔

一、什麼是CSS定位？

CSS定位允許web開發者通過CSS來控制元素的位置。CSS定位有三種基本模式：靜態定位、相對定位和絕對定位。靜態定位是元素默認的CSS定位方式，即元素根據頁面文檔流的位置進行排列。相對定位和絕對定位可以修改元素的位置，並且不會影響其他元素的排列。

二、靜態定位

靜態定位是所有元素的默認狀態，元素的位置由文檔流決定。CSS中，靜態定位可以使用position屬性，值為static。以下是一個靜態定位的例子：

<div>
  <p>這是靜態定位的段落。</p>
</div>

div {
  /*position屬性設置為static*/
  position: static;
}

三、相對定位

相對定位使用position屬性，值為relative，可以在元素原本的位置上進行微調，而不影響其他元素的排列。下面的CSS代碼演示了如何使用相對定位：

<div>
  <p>這是默認位置的段落。</p>
  <p>這個段落相對原來的位置向下移了20像素。</p>
</div>

div {
  /*position屬性設置為relative*/
  position: relative;
}

/*第二個段落相對於div向下移動20像素*/
div p:nth-child(2) {
  /*top屬性為正值表示向下移動*/
  top: 20px;
}

四、絕對定位

絕對定位使用position屬性，值為absolute，可以將元素從文檔流中取出，並相對於離它最近的已定位的父元素進行定位。

<div>
  <p>這是父元素的內容。</p>
  <div>
    <p>這是絕對定位的段落。</p>
  </div>
</div>

div {
  /*position屬性設置為relative*/
  position: relative;
}

/*絕對定位的段落*/
div div p {
  /*position屬性設置為absolute*/
  position: absolute;
  /*top和left屬性設置為0，元素將定位在父元素的左上角*/
  top: 0;
  left: 0;
}

五、粘性定位

粘性定位使用position屬性，值為sticky，可以將元素粘在距離視口頂部一定距離的位置上。粘性定位可以使得元素在滾動時固定在特定位置。

<div>
  <p>這是普通的文本內容。</p>
  <p>這是粘性定位的段落，當滾動頁面時，它固定在頂部。</p>
</div>

/*粘性定位的段落*/
div p:nth-child(2) {
  /*position屬性設置為sticky*/
  position: sticky;
  /*距離頂部100px*/
  top: 100px;
}

六、固定定位

固定定位使用position屬性，值為fixed，可以將元素固定在瀏覽器窗口中的特定位置，不隨滾動而移動。

<div>
  <p>這是固定定位的段落，它將始終固定在頁面的右下角。</p>
</div>

/*固定定位的段落*/
div p {
  /*position屬性設置為fixed*/
  position: fixed;
  /*距離窗口底部20px，右側20px*/
  bottom: 20px;
  right: 20px;
}

七、結語

CSS定位提供了多種方式來控制元素的位置，包括靜態定位、相對定位、絕對定位、粘性定位和固定定位。開發者可以根據需要選擇不同的定位方式來掌控網頁中元素的排版和布局。