理解 CSS position 属性的五种主要取值及其应用场景
掌握静态（static）、相对（relative）、绝对（absolute）、固定（fixed）和粘性（sticky）定位的区别
学会使用 top、right、bottom、left 属性精确控制元素位置
能够构建包含重叠层、响应式布局和固定导航栏的复杂网页结构
理解不同定位模式下元素的文档流行为及参考坐标系
CSS 定位是控制网页元素放置位置的核心机制。它允许开发者将元素相对于正常文档流、浏览器视口或其他特定元素进行精确定位。
核心属性：
position：定义元素的定位类型
top、right、bottom、left：配合定位属性使用，指定偏移量
常见定位值：
static（静态）
relative（相对）
absolute（绝对）
fixed（固定）
sticky（粘性）
这些定位模式共同协作，帮助开发者创建灵活的布局、重叠效果以及响应式设计。
静态定位是 HTML 元素的默认定位方式。在此模式下，元素完全遵循正常的文档流排列，不接受 top、left、right 或 bottom 属性的影响。
特点：
元素按照 HTML 代码出现的顺序依次排列
无法通过偏移属性改变位置
不产生重叠或位移效果
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>静态定位示例</title>
<style>
div {
border: 1px solid #000;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div>盒子 1</div>
<div>盒子 2</div>
</body>
</html>效果说明： 上述代码中的两个盒子将严格按照文档流顺序垂直排列，彼此之间保持设定的外边距，没有任何位置偏移。
相对定位允许元素相对于其原本在文档流中的位置进行移动。设置 position: relative 后，可以使用 top、left、right、bottom 属性调整元素位置。
关键特性：
元素移动后，原本占据的空间仍然保留（不会导致其他元素填补空缺）
偏移量是相对于元素原始位置计算的
常作为绝对定位子元素的参考容器
示例代码：
div {
border: 1px solid #000;
padding: 10px;
margin: 10px;
}
.relative-box {
position: relative;
top: 20px;
left: 30px;
}效果说明： 应用了 .relative-box 类的元素会向下移动 20 像素，向右移动 30 像素，但其原始位置仍被保留，后续元素不会上移填补。
绝对定位会将元素完全从正常文档流中移除。元素的位置是相对于最近的已定位祖先元素（即 position 值不为 static 的祖先）进行计算的。如果不存在这样的祖先，则相对于初始包含块（通常是视口）。
关键特性：
元素脱离文档流，不占据原有空间
定位参考系是最近的非 static 定位祖先
常用于创建悬浮层、模态框或精确布局
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>绝对定位示例</title>
<style>
.container {
position: relative; /* 作为绝对定位子元素的参考点 */
width: 300px;
height: 200px;
border: 2px solid #000;
margin: 20px auto;
}
.absolute-box {
position: absolute;
top: 50px;
left: 50px;
background-color: pink;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<p>具有相对定位的容器</p>
<div class="absolute-box">绝对定位的元素</div>
</div>
</body>
</html>效果说明： 粉色背景的 .absolute-box 元素将位于 .container 容器内部，距离容器顶部 50 像素、左侧 50 像素的位置。它不会影响容器内其他元素的布局。
固定定位同样将元素从文档流中移除，但其定位参考系是浏览器视口（Viewport）。无论页面如何滚动，该元素始终保持在视口中的固定位置。
关键特性：
元素相对于浏览器窗口定位
页面滚动时元素位置不变
常用于固定导航栏、回到顶部按钮或全局提示框
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>固定定位示例</title>
<style>
.fixed-box {
position: fixed;
top: 10px;
right: 10px;
background-color: lightgreen;
padding: 20px;
border: 2px solid #000;
}
.content {
height: 1200px;
padding: 10px;
}
</style>
</head>
<body>
<h2>固定定位示例</h2>
<div class="fixed-box">固定盒子</div>
<div class="content">
<p>向下滚动页面，观察固定盒子始终停留在右上角。</p>
<p>此处模拟长页面内容...</p>
</div>
</body>
</html>效果说明： 绿色背景的 .fixed-box 将始终显示在浏览器窗口的右上角，即使用户向下滚动查看长内容，该盒子也不会移动。
粘性定位是一种混合模式，它在元素到达特定滚动阈值前表现为相对定位，一旦达到阈值则表现为固定定位。其行为取决于用户的滚动位置和包含块的范围。
关键特性：
在跨越设定的偏移量（如 top: 0）之前，表现如同相对定位
跨越阈值后，表现如同固定定位，但仅限于其父容器范围内
常用于表格表头固定或侧边栏导航
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>粘性定位示例</title>
<style>
.sticky-box {
position: sticky;
top: 0;
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="sticky-box">我是粘性元素</div>
<p>向下滚动以观察效果。</p>
<div style="height: 1000px;"></div>
</body>
</html>效果说明： 黄色背景的 .sticky-box 在页面滚动到其顶部触及视口顶部（top: 0）时，会“粘”在视口顶部。但当其父容器滚动出视口时，它也会随之离开，不会像 fixed 那样永远悬浮。
为了巩固所学知识，请思考以下问题：
如果一个元素设置了 position: absolute，但其所有祖先元素都是默认的 static 定位，该元素将相对于什么进行定位？
在使用 position: relative 移动元素后，原位置留下的空白区域会被后续元素填充吗？为什么？
在设计一个长文章页面时，希望章节标题在滚动到页面顶部时自动吸附在顶部，但在进入下一章时自动替换为新的章节标题，应该使用哪种定位模式？如何实现？