一文彻底讲透 CSS 定位（示例拿来即用）

CSS 定位机制可以控制元素的位置，使用的属性有 position, top, right, bottom, left, z-index 等。

1. 静态定位（Static Positioning）

这是所有元素的默认定位方式，不需要特别的CSS定位。

div {
  position: static;
}

2. 相对定位（Relative Positioning）

相对定位是相对于元素在文档中的原始位置进行定位。

div {
  position: relative;
  top: 20px;
  left: 40px;
}

3. 绝对定位（Absolute Positioning）

绝对定位是相对于最近的非静态定位的父元素进行定位。

div {
  position: absolute;
  top: 20px;
  right: 15px;
  bottom: 10px;
  left: 5px;
}

4. 固定定位（Fixed Positioning）

固定定位总是相对于视口进行定位，无论页面如何滚动。

div {
  position: fixed;
  top: 10px;
}

5. 粘性定位（Sticky Positioning）

粘性定位是基于用户的滚动位置。它变得“粘”在一个特定的位置。

div {
  position: sticky;
  top: 10px;
}

6. z-index 属性

z-index 属性指定了元素的堆叠顺序。

div {
  position: relative;
  z-index: 10;
}

以上代码示例展示了如何在CSS中使用不同的定位方法。在实际应用中，可以根据需要选择合适的定位方式来进行布局设计。