CSS 定位

CSS 定位详解

学习如何使用 CSS 定位属性控制页面上元素的放置位置和堆叠顺序。

position 属性

position 属性定义了元素在文档中的定位方式。top、right、bottom 和 left 属性随后用于确定已定位元素的最终位置。

这些偏移属性（top、right、bottom、left）仅影响 position 值不是 static 的元素。

position 属性有五个主要值：

position: static;（静态定位）

这是默认值。静态定位元素按照正常的文档流布局。top、right、bottom、left 和 z-index 属性对其没有影响。

position: relative;（相对定位）

position: relative; 的元素按照正常的文档流布局，然后相对于其自身原本的位置进行偏移。元素在正常流中原本会占据的空间会保留。

使用 top、right、bottom、left 调整其位置，而不会影响周围元素的布局。

.offset-box {
  position: relative;
  top: -10px; /* 相对于其正常位置向上移动 10px */
  left: 20px; /* 相对于其正常位置向右移动 20px */
  background-color: lightyellow;
}

至关重要的是，相对定位元素充当绝对定位子元素的包含块。

position: absolute;（绝对定位）

position: absolute; 的元素会从正常文档流中移除。页面布局中不会为其创建空间。它相对于其最近的已定位祖先元素进行定位（即 position 值不是 static 的元素）。

如果没有已定位的祖先元素，它将相对于初始包含块（通常是 <html> 元素）进行定位。其最终位置由 top、right、bottom、left 确定。

.container {
  position: relative; /* 建立包含块 */
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 50px;
  background-color: rgba(0, 0, 255, 0.5); /* 半透明蓝色 */
}

绝对定位元素很容易覆盖其他元素。

position: fixed;（固定定位）

类似于 absolute，固定定位元素会从正常文档流中移除。然而，它们总是相对于视口（浏览器窗口）进行定位，而不是已定位的祖先元素。

这意味着即使页面滚动，固定元素也会保持在同一位置。

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 1em;
  z-index: 1000; /* 确保它保持在最上面 */
}

常见用途包括固定导航栏、Cookie 横幅或“滚动到顶部”按钮。

position: sticky;（粘性定位）

粘性定位是相对定位和固定定位的混合。元素最初被视为 relative，直到其在其包含块（最近的可滚动祖先）内越过指定阈值（由 top、right、bottom 或 left 定义）。此时，它会变成“粘性”，并相对于该容器表现得像 fixed 一样。

.sticky-sidebar-heading {
  position: sticky;
  top: 10px; /* 距离视口/滚动容器顶部 10px 处粘滞 */
  background-color: white;
  padding: 0.5em 0;
  z-index: 100;
}

适用于滚动页面时粘滞的部分标题，或粘性表格头部/列。

重叠元素：z-index

当元素定位在正常流之外时（absolute、fixed、带有偏移的 relative、sticky），它们可能会重叠。

z-index 属性控制已定位元素的堆叠顺序。z-index 值越高的元素显示在值较低的元素前面。

z-index 只对已定位元素有效（不对 static 有效）。它接受整数值（正数、负数或零）。

.background-image {
  position: absolute;
  z-index: -1; /* 放置在其他内容后面 */
  /* ... other styles */
}

.modal-dialog {
  position: fixed;
  z-index: 9999; /* 确保它位于最顶层 */
  /* ... other styles */
}

注意：如果两个已定位元素重叠且具有相同的 z-index（或未指定，默认为 auto），则在 HTML 源代码中后出现的元素将显示在上面。

堆叠上下文（Stacking contexts）可能会增加 z-index 的复杂性。在 MDN 上了解更多信息。

控制内容溢出：overflow

overflow 属性指定当内容超出元素的盒子时（当内容大于元素的尺寸时）会发生什么。

• visible（默认值）：内容会溢出盒子，并可能覆盖其他元素。
• hidden：溢出的内容会被剪裁并隐藏。
• scroll：溢出的内容会被剪裁，并添加滚动条（总是添加，即使不需要）。
• auto：只有当内容溢出时才添加滚动条。
• clip：类似于 hidden，但可能更快，因为它完全禁止滚动。

.text-box {
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
  overflow: auto; /* 如果文本过长，则添加滚动条 */
}

相关属性 overflow-x 和 overflow-y 允许独立控制水平和垂直溢出。

裁剪元素：clip-path

将元素裁剪为特定形状的现代方法是使用 clip-path 属性。它创建一个裁剪区域，只显示位于该区域内的部分元素。

它接受各种形状，如 circle()、ellipse()、polygon()，或 SVG 路径。

.circular-avatar {
  width: 150px;
  height: 150px;
  clip-path: circle(50% at 50% 50%); /* 创建圆形裁剪 */
  /* object-fit: cover; /* 常用于图像 */ */
}

.diagonal-clip {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); /* 自定义形状 */
}

注意：较旧的 clip 属性已弃用，不应再使用。clip-path 是现代标准。

CSS 定位属性参考

属性	描述	常用值
position	指定定位方法。	static | relative | absolute | fixed | sticky
top、right、bottom、left	已定位元素的偏移属性。	auto | <长度值> | <百分比>
z-index	设置已定位元素的堆叠顺序。	auto | <整数值>
overflow、-x、-y	指定内容溢出时的行为。	visible | hidden | scroll | auto | clip
clip-path	将元素裁剪为形状。	<基本图形> | <几何框> | url() | none
cursor	指定鼠标光标样式。	（各种关键词如 pointer、wait、help 等）

在 MDN Web Docs 上进一步探索这些属性，获取详细信息和示例。