CSS 定位

CSS 布局 - position 属性

position 属性是控制元素的布局方法和位置的基础，通常与偏移属性 (top, right, bottom, left) 和 z-index 一起使用。

理解 position 属性

position 属性决定了元素在文档或其容器中的定位方式。它与偏移属性配合使用。

position 属性有五个主要值:

• static: 默认值。元素遵循正常的文档流。偏移属性没有效果。
• relative: 元素相对于其在正常流中的原始位置进行定位。偏移属性仅在视觉上移动元素，而不影响周围的布局（原始空间被保留）。
• absolute: 元素从正常文档流中移除，并相对于其最近的已定位的祖先元素（即 position 设置为 relative, absolute, fixed, 或 sticky 的祖先元素）进行定位。如果不存在已定位的祖先元素，则相对于初始包含块 (initial containing block) 进行定位（通常是 <html> 元素）。
• fixed: 元素从正常文档流中移除，并相对于视口 (viewport)（浏览器窗口）进行定位。即使页面滚动，它也会保持在同一个位置。
• sticky: 一个混合值。元素在其父容器内表现得像 relative，直到滚动位置达到指定的阈值（由 top 等偏移属性定义），之后它会相对于其最近的滚动祖先元素或视口表现得像 fixed。

注意: 偏移属性 (top, right, bottom, left) 只对 position 值不是 static 的元素有效。

position: static (默认)

元素按照它们在 HTML 中出现的顺序布局。这是默认行为。

[想象一个在页面流中正常定位的简单 Div]

CSS:

.static-element {
  position: static; /* 默认值，通常不需要显式设置 */
  border: 3px solid green;
}

top, right, bottom, left 和 z-index 对 static 元素没有效果。

position: relative

允许您使用 top, right, bottom, left 将元素从其正常位置偏移。它原来占据的空间仍然保留，其他元素不受影响。

它也可以作为 absolute 定位子元素的定位上下文。

[想象一个 Div 从其正常位置稍微向下和向右偏移，并在其后面留下空白空间]

CSS:

.relative-element {
  position: relative;
  left: 30px;
  top: 15px;
  border: 3px solid blue;
}

position: fixed

将元素相对于浏览器视口进行定位。即使滚动页面，它也保持固定。它从正常流中移除，因此不占用空间。

常用于需要始终可见的页眉、页脚或侧边栏。

[想象一个固定在浏览器窗口右下角的小方框]

CSS:

.fixed-element {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 200px;
  border: 3px solid red;
  background-color: lightgray;
}

position: absolute

将元素相对于其最近的已定位的祖先元素进行定位。如果不存在，则使用初始包含块（通常是 <html>）。它从正常流中移除。

对于创建覆盖层 (overlays)、下拉菜单 (dropdown menus)、工具提示 (tooltips) 等至关重要。

[想象一个容器 Div (relative)，其中包含一个较小的 Div (absolute) 精确地定位在其右上角]

HTML 结构:

<div class="relative-container">
  我是容器 (position: relative)。
  <div class="absolute-child">
    我被绝对定位 (top: 10px, right: 10px)。
  </div>
</div>

CSS:

.relative-container {
  position: relative; /* 建立定位上下文 */
  width: 400px;
  height: 200px;
  border: 3px solid orange;
  padding: 10px;
}

.absolute-child {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 150px;
  height: 50px;
  border: 3px solid purple;
  background-color: lightyellow;
}

position: sticky

在其父元素内表现得像 position: relative，直到达到滚动阈值（例如，top: 0）。然后，它相对于其滚动容器“粘滞”在原位，行为类似于 position: fixed。

适用于在滚动过特定点后才出现的粘滞页眉或导航。

[想象一个部分标题，它正常滚动，但到达视口顶部后会粘滞在那里]

CSS:

.sticky-header {
  position: sticky;
  top: 0; /* 当滚动位置到达此处时粘滞在顶部 */
  background-color: white;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

注意: 粘滞定位可能有些复杂，并且取决于父元素的 overflow 属性。

堆叠顺序: z-index

当已定位的元素重叠时，z-index 属性控制它们的堆叠顺序（哪个元素显示在上面）。

z-index 只对已定位的元素 (relative, absolute, fixed, sticky) 有效。值越大，显示在越上面。具有相同 z-index 的元素根据它们在 HTML 中的顺序进行堆叠。

示例:

.element-on-top {
  position: absolute;
  z-index: 10;
  background-color: lightblue;
}

.element-below {
  position: absolute;
  z-index: 5;
  background-color: lightcoral;
}