# 3.19 排版 - 關於定位(position)

一個元素，在版面中的位置，就叫做定位，有幾種基本的定位型態，可設定的值有：

* **static**：這是所有元素的預設值。
* **fixed**：固定定位，相對於螢幕。
* **relative**：相對定位。相對於自己原來的位置。
* **absolute**：絕對定位。一直往父元素找，直到找到第一個 **`非 static`** 的元素，那就相對於它來定位。
* **sticky**：假設搭配 **`top: 0;`** ，螢幕上方未碰觸到該元素時，會在原位置；碰觸到時，置頂。而置頂的期間，取決於父元素高度範圍。

## 固定定位：fixed

不論使用者滑動到頁面的哪個區域， fixed 元素都會固定在螢幕的指定位置，需搭配 top、right、bottom、left 四個屬性，來決定要固定在哪個位置。例：

部份 HTML：

```markup
<p>段落</p>
<p class="the_fixed">fixed 段落</p>
<p>段落</p>
```

CSS：

```css
p.the_fixed{
  border:1px solid red;
  margin:0;
  padding:0;

  /* 改變定位模式(fixed) */
  position: fixed;
  right:0;
  top:0;
}
```

結果：

![](/files/-Lm_X0wvUmHKh1-VBr56)

範例：

{% embed url="<https://codepen.io/carlos411/pen/yLBPdoG>" %}

## 相對定位：relative

相對於自己原來的位置，該如何位移，一樣搭配 top、right、bottom、left。有以下兩個特性：

* 元素位移之後，不影響周圍的元素。
* 元素位移之後，若超出螢幕，會造成頁面上出現水平捲軸。

範例：

{% embed url="<https://codepen.io/carlos411/pen/LYPOKzG>" %}

## 絕對定位：absolute

當一個元素設定成 absolute 的定位模式，就會一直往父層找，直到「**找到第一個父元素，其 position 的定位模式不是預設的 static 即可，即相對於它來做定位**」。例：

HTML：

```markup
<p>段落</p>
<div class="relative_block">
  這是 relative 的區塊
  <p class="the_absolute">absolute 段落</p>
</div>
<p>段落</p>
<p>段落</p>
```

CSS：

```css
div.relative_block{
  position: relative;
  border:1px solid black;
  width: 300px;
  height: 300px;
}
p.the_absolute{
  border:1px solid red;
  margin:0;

  position: absolute;
  bottom: 10px;
  right:10px;
}
```

結果：

![](/files/-Lm_Xl0s7cWDWcnCDBH1)

範例：

{% embed url="<https://codepen.io/carlos411/pen/aboVgVb>" %}

## sticky 定位模式

當一個元素 `position` 設定成 `sticky` 之後，通常會再搭配 `top` 屬性(也可以是其它的 right、bottom、left，但 top 較常用)，來決定當螢幕的上方，距離元素上方多少距離時，就定住。例：

{% embed url="<https://codepen.io/carlos411/pen/PoqbLrE>" %}

## 關於 z-index

元素當中如果在**同一層**，定位上有**重疊**的狀態，可以使用 **`z-index`** ，設定**正整數**來決定元素的疊層順序。愈大的值，代表會出現在愈上方。

例：

{% embed url="<https://codepen.io/carlos411/pen/JjeQjdB>" %}

## 練習

提供 html 如下：

```markup
<div class="pic_item">
  <a href="#" class="pic_link" target="_blank">
    <img src="https://picsum.photos/id/211/800/400">
  </a>
  <span class="-hot">熱門</span>
  <div class="item_desc">這是圖片描述</div>
</div>
```

練習加上 CSS 後，呈現結果如下：

![](/files/-LtsC9S7mXlQpg41mDRO)

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/Xvxzvw>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/html-and-css/3.-css/3.17-pai-ban-guan-wu-ding-wei-position.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.