# 层级控制 z-index

URL: https://caijiao.org/css/06-position-float/04-z-index
Source: docs/css/06-position-float/04-z-index.md
Description: z-index 属性控制重叠元素的堆叠顺序，决定元素在三维空间中的显示层级，常与 position 一起使用。

CSS 的 `z-index` 属性用于控制定位元素（`position` 非 static）的叠放顺序，数值越大，元素越靠前显示。

## 1. 使用条件

- 只有定位元素（`position` 为 `relative`、`absolute`、`fixed` 或 `sticky`）才能使用 `z-index`。
- 默认值为 `auto`，元素按文档顺序叠放。

## 2. 取值

- 整数（正负皆可），数值越大，层级越高。
- `auto` 表示默认层级。

```css
z-index: 10;
````

## 3. 应用场景

* 弹窗遮罩
* 下拉菜单覆盖内容
* 浮动按钮置顶

## 示例代码

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>z-index 层级示例</title>
  
</head>
<body>
  <div class="box box1">z-index: 1</div>
  <div class="box box2">z-index: 3</div>
  <div class="box box3">z-index: 2</div>
</body>
</html>
```