CSS的五种定位方式

CSS提供了几种方式来定位内容，以下是五种最常见的定位方式：

1. 静态定位（Static Positioning）
2. 相对定位（Relative Positioning）
3. 绝对定位（Absolute Positioning）
4. 固定定位（Fixed Positioning）
5. 粘性定位（Sticky Positioning）

解释和示例代码：

1. 静态定位（Static Positioning）：

   这是默认定位方式，不需要特别指定。

div {
  position: static;
}

2. 相对定位（Relative Positioning）：

   元素相对于其正常位置进行定位。

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

3. 绝对定位（Absolute Positioning）：

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

div {
  position: absolute;
  top: 100px;
  right: 50px;
}

4. 固定定位（Fixed Positioning）：

   元素相对于视口（浏览器窗口）进行定位，无论滚动条如何滚动，元素都会固定在屏幕上的指定位置。

div {
  position: fixed;
  bottom: 0;
  left: 0;
}

5. 粘性定位（Sticky Positioning）：

   元素在达到一定阈值之前为相对定位，之后为固定定位。

div {
  position: sticky;
  top: 0;
}

注意：position: sticky 在一些旧浏览器中可能不被支持。