# CSS position 参考

URL: https://caijiao.org/reference/css/position
Source: docs/reference/css/position.md
Description: CSS position Reference，整理 static、relative、absolute、fixed、sticky、inset、z-index、可运行演示和常见错误。

`position` 用于控制元素定位方式。它常见于角标、浮层、固定导航、吸顶标题和局部绝对定位。

## 语法

```css
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}
```

## 常用值

| 值 | 说明 |
| --- | --- |
| `static` | 默认定位 |
| `relative` | 相对自身位置偏移，也可作为 absolute 子元素定位上下文 |
| `absolute` | 相对最近的已定位祖先定位 |
| `fixed` | 相对视口固定 |
| `sticky` | 在滚动容器中达到阈值后吸附 |

## 可运行演示

[在线代码演示](/reference/css/demos/position-badge.html)

## 常见错误

- `absolute` 找不到预期父级，通常是父级忘记设置 `position: relative`。
- `sticky` 不生效，常见原因是父级 overflow 或滚动容器不符合预期。
- 试图用很大的 `z-index` 解决所有遮挡问题，但真正问题可能是 stacking context。

## 相关内容

- [CSS Reference](/reference/css/)
- [CSS position 教程](/css/06-position-float/03-position)
- [CSS z-index 教程](/css/06-position-float/04-z-index)
- [MDN position](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position)