-
固定定位（Fixed Positioning）：
-
元素相对于浏览器窗口进行定位，即使页面滚动，元素也会固定在同一个位置。
-
position: fixed;
-
-
静态定位（Static Positioning）：
-
默认的定位方式，元素按照正常的文档流进行布局。
-
position: static;（默认值，不需要明确设置）
-
-
粘性定位（Sticky Positioning）：
-
是一种混合定位方式，结合了相对定位和固定定位的特点。
-
position: sticky; -
元素在跨越特定阈值前为相对定位，之后为固定定位。
-
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{ margin: 0; /* 清楚页面默认的外边距 */ }p{width: 100px; /* 设置宽 */height: 50px; /* 设置高 */margin: 0; /* 清楚p元素默认的外边距 */}.block1{background-color: red; /* 设置背景色 */position: fixed; /* 固定定位 */top: 0; /* 距离页面顶部距离 */left: 150px; /* 距离页面左侧距离 */}.block2{background-color: blue; /* 设置背景色 */position: static; /* 固定定位 */}.block3{background-color: yellow; /* 设置背景色 */position: sticky; /* 固定定位 */left: 0; /* 距离页面左侧距离 */right: 0; /* 距离页面右侧距离 */}</style>
</head>
<body><p class="block1">1-固定定位</p><p class="block2">2-静态定位</p><p class="block3">3-粘性定位</p>
</body>
</html>图例：
