【前端初学者】【CSS笔记】之定位：相对定位、绝对定位、固定定位、静态定位及粘性定位

在CSS中，定位属性主要有以下几种：

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

6. 静态定位：

   这是所有元素的默认定位方式，不使用position属性时，元素的定位模式就是静态定位。

7. 相对定位：

   相对定位是一个非常常用的定位方式，它对元素进行相对于其正常位置的定位。设置了相对定位的元素仍然占据它在文档流中的原始空间。

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

3. 绝对定位：

   绝对定位是一种更加高级的定位方式，元素会被移除出正常文档流，并且相对于最近的非静态定位的父元素进行定位。如果没有这样的父元素，则相对于初始包含块进行定位。

div {
  position: absolute;
  top: 20px;
  right: 30px;
}

4. 固定定位：

   固定定位类似于绝对定位，但是它是相对于浏览器窗口进行定位的，而不是正常的父元素。

div {
  position: fixed;
  bottom: 10px;
  left: 5px;
}

5. 粘性定位：

   粘性定位是相对定位和固定定位的混合体，它是相对定位在当页面滚动到一定程度时才转换为固定定位。

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

以上代码示例展示了如何在CSS中使用这些定位属性。在实际开发中，可以根据页面布局的需要，灵活运用这些定位方式。