# position 定位模型

URL: https://caijiao.org/css/06-position-float/03-position
Source: docs/css/06-position-float/03-position.md
Description: position 属性用于设置元素的定位方式，包括静态定位、相对定位、绝对定位和固定定位，是布局控制的核心属性。

CSS 的 `position` 属性决定元素的定位方式，配合 `top`、`right`、`bottom`、`left` 属性可精确控制元素位置。

## 1. 静态定位（static）

- 默认值，元素按正常文档流排列。
- `top`、`left` 等属性无效。

```css
position: static;
```

## 2. 相对定位（relative）

- 元素保持在文档流中，但可相对自身正常位置偏移。
- 偏移不会影响其他元素布局。

```css
position: relative;
top: 10px;
left: 20px;
```

## 3. 绝对定位（absolute）

- 元素脱离文档流，定位相对于最近的已定位父元素（非 static）。
- 可使用 `top`、`left` 等属性精确定位。
- 不占据空间，可能覆盖其他内容。

```css
position: absolute;
top: 0;
right: 0;
```

## 4. 固定定位（fixed）

- 元素脱离文档流，定位相对于浏览器窗口固定位置。
- 滚动页面时元素位置不变。

```css
position: fixed;
bottom: 10px;
right: 10px;
```

## 5. 粘性定位（sticky）

- 介于相对定位和固定定位之间。
- 元素在滚动到设定阈值时固定位置。

```css
position: sticky;
top: 0;
```

## position 定位示例

[在线代码演示](/css/demos/13.html)