CSS 定位
position 属性用于指定元素的定位类型，即元素在文档中的定位方式。通过与 top, right, bottom, left 这四个属性结合使用，你可以精确地控制元素在页面上的位置。
position: static;
这是所有元素的默认值。静态定位的元素会遵循正常的文档流（Normal Flow）。也就是说，它们会按照在 HTML 中出现的顺序，一个接一个地排列。
对于静态定位的元素，top, right, bottom, left 和 z-index 属性是无效的。
position: relative; (相对定位)
相对定位的元素仍然遵循正常的文档流，它原本在文档流中占据的空间会被保留。
然后，你可以使用 top, right, bottom, left 属性，使其相对于其原始位置进行移动。移动后，它可能会覆盖其他元素。
.relative-box {
position: relative;
left: 30px;
top: 10px;
border: 3px solid #73AD21;
}核心用途: 相对定位本身用得不多，但它最重要的作用是作为绝对定位元素的容器。我们马上就会看到。
position: absolute; (绝对定位)
绝对定位是一个非常强大的属性。当一个元素被设置为 position: absolute; 时，会发生两件事：
- 脱离文档流: 该元素会完全从正常的文档流中被移除。它不再占据任何空间，其他元素会当它不存在一样进行排列。
- 相对于“定位祖先”定位: 它会相对于其最近的、已定位的 (positioned) 祖先元素进行定位。一个“已定位的”元素是指其
position值不是static的元素（即relative,absolute,fixed,sticky）。
如果它找不到任何已定位的祖先元素，它最终会相对于初始包含块，通常是 <body> 元素。
<div class="relative-container">
这是一个相对定位的容器。
<div class="absolute-box">这是一个绝对定位的盒子</div>
</div>.relative-container {
position: relative; /* 关键！为绝对定位的子元素提供定位上下文 */
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
.absolute-box {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #FF9800;
}在这个例子中，.absolute-box 会相对于 .relative-container 的右上角进行定位。
position: fixed; (固定定位)
固定定位与绝对定位类似，因为它也会使元素脱离文档流。但关键区别在于：
固定定位的元素是相对于浏览器视口 (viewport) 进行定位的。
这意味着即使用户滚动页面，该元素也会固定在屏幕的同一个位置。它常用于创建固定的导航栏、回到顶部按钮或 cookie 通知栏。
.fixed-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
}position: sticky; (粘性定位)
粘性定位是相对定位和固定定位的混合体。元素在跨越特定阈值之前，表现为相对定位；跨越之后，则表现为固定定位。
这个阈值由 top, right, bottom, left 属性定义。
它非常适合用于创建“滚动到一定位置后固定的侧边栏”或“表格标题”等效果。
.sticky-header {
position: sticky;
top: 0; /* 当元素滚动到视口顶部时，它会“粘”在那里 */
background-color: white;
padding: 10px;
border-bottom: 1px solid #ccc;
}z-index
当元素因为定位而发生重叠时，z-index 属性可以控制它们的堆叠顺序（哪个元素在上面，哪个在下面）。
z-index只对已定位的元素 (非static) 有效。- 拥有更高
z-index值的元素会显示在拥有较低z-index值的元素之上。 z-index可以是正数、负数或 0。
.img-behind {
position: absolute;
left: 0px;
top: 0px;
z-index: -1; /* 将图片置于文本之后 */
}