css中定位有几种，有什么区别

在CSS中，定位是一种非常重要的技术，它可以让元素在页面上以不同的方式进行排列和定位。在CSS中，定位主要有以下几种方式：

1. 静态定位（Static）：这是元素的默认定位方式，它按照正常的文档流进行定位。
2. 相对定位（Relative）：元素相对于它在正常文档流中的位置进行定位。
3. 绝对定位（Absolute）：元素相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块进行定位。
4. 固定定位（Fixed）：元素相对于浏览器窗口进行定位。即使页面滚动，它也始终保持在同一位置。
5. 粘性定位（Sticky）：这是相对定位和固定定位的混合。元素在达到特定阈值之前为相对定位，然后变为固定定位。

以下是这些定位方式的代码示例：

1.静态定位：

cssdiv {
position: static;
}

2.相对定位：

cssdiv {
position: relative;
top: 20px; /* 向下移动20px */
left: 30px; /* 向左移动30px */
}

3.绝对定位：

cssdiv {
position: absolute;
top: 50px; /* 相对于最近的已定位祖先元素向下移动50px */
left: 100px; /* 相对于最近的已定位祖先元素向左移动100px */
}

4.固定定位：

cssdiv {
position: fixed;
bottom: 0; /* 相对于浏览器窗口向下移动到最底部 */
right: 0; /* 相对于浏览器窗口向右移动到最右边 */
}

5.粘性定位：

cssdiv {
position: relative; /* 首先为相对定位 */
top: 20px; /* 在到达特定阈值之前相对移动 */
right: 30px; /* 在到达特定阈值之前相对移动 */
position: fixed; /* 然后变为固定定位 */
top: 0; /* 在到达特定阈值后固定在顶部 */
right: 0; /* 在到达特定阈值后固定在右边 */
}