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; /* 将图片置于文本之后 */
}

#CSS 定位

#position: static;

#position: relative; (相对定位)

#position: absolute; (绝对定位)

#position: fixed; (固定定位)

#position: sticky; (粘性定位)