知识篇 -- CSS定位：掌控元素在页面中的位置

Ray Shine 2023/11/11 CSS核心概念

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

CSS的 position 属性是控制元素在网页中精确位置的关键。它允许我们将元素从正常的文档流中“取出”，并根据不同的定位方式来放置它们。理解 position 属性的不同值及其相互作用，是实现复杂布局和交互效果的基础。

# 一、`position` 属性的五种主要值

# 1. `static` (静态定位)

特点：
- 默认值：所有HTML元素的默认定位方式。
- 遵循文档流：元素按照HTML文档的正常顺序进行布局。
- top, right, bottom, left, z-index 无效：这些偏移属性对静态定位的元素不起作用。
何时使用：当您不需要对元素进行特殊定位，希望它自然地融入文档流时。

示例：

<div style="background-color: lightblue; padding: 10px;">这是一个静态定位的div。</div>
<p style="background-color: lightcoral; padding: 10px;">这是一个静态定位的p。</p>

效果：两个元素会上下排列，各自占据一行。

# 2. `relative` (相对定位)

特点：
- 相对于自身定位：元素相对于其在正常文档流中的原始位置进行偏移。
- 保留空间：即使元素偏移了，它在文档流中占据的空间仍然保留，不会影响其他元素的布局。
- top, right, bottom, left, z-index 有效：这些偏移属性会使元素从其原始位置移动。
何时使用：
- 微调元素位置，而不影响周围元素。
- 作为 absolute 定位元素的包含块（containing block）。

示例：

<div style="background-color: lightblue; padding: 10px; position: relative; left: 20px; top: 10px;">
    这个div相对自身位置向右偏移20px，向下偏移10px。
</div>
<p style="background-color: lightcoral; padding: 10px;">这个p元素的位置不受上面div偏移的影响。</p>

效果：div 会向右下角偏移，但 p 元素仍然在 div 原始位置的下方。

# 3. `absolute` (绝对定位)

特点：
- 脱离文档流：元素会从正常的文档流中完全移除，不再占据空间。
- 相对于最近的已定位祖先元素定位：元素会相对于其最近的 position 属性为 relative, absolute, fixed 或 sticky 的祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是 <html> 元素）定位。
- top, right, bottom, left, z-index 有效：这些偏移属性决定了元素相对于其包含块的位置。
何时使用：
- 创建浮动面板、模态框、工具提示等。
- 将元素精确放置在页面的特定位置。

示例：

<div style="background-color: lightgray; padding: 20px; position: relative; width: 300px; height: 150px;">
    这是一个相对定位的父容器。
    <span style="background-color: lightgreen; padding: 5px; position: absolute; top: 10px; right: 10px;">
        这个span绝对定位在父容器的右上角。
    </span>
</div>
<p style="background-color: lightcoral; padding: 10px;">这个p元素会紧跟在父容器后面，因为span脱离了文档流。</p>

效果：span 会精确地定位在 div 容器的右上角，而 p 元素会忽略 span 的存在，紧跟在 div 后面。

# 4. `fixed` (固定定位)

特点：
- 脱离文档流：与 absolute 类似，元素会从正常的文档流中移除。
- 相对于视口定位：元素会相对于浏览器视口（viewport）进行定位，即使页面滚动，它也会保持在屏幕上的固定位置。
- top, right, bottom, left, z-index 有效。
何时使用：
- 创建固定导航栏、返回顶部按钮、广告条等。

示例：

<div style="background-color: #333; color: white; padding: 10px; position: fixed; top: 0; width: 100%; text-align: center;">
    这是一个固定在顶部的导航栏。
</div>
<div style="height: 1000px; background-color: #f0f0f0; padding-top: 50px;">
    页面内容很长，可以滚动。
</div>

效果：导航栏会始终固定在浏览器窗口的顶部，不随页面滚动而移动。

# 5. `sticky` (粘性定位)

特点：
- 混合模式：元素在跨越特定阈值前是相对定位，之后变为固定定位。
- 遵循文档流：在未达到阈值前，元素仍然在文档流中占据空间。
- top, right, bottom, left 属性是激活粘性定位的必要条件。
何时使用：
- 创建滚动时固定在顶部的标题、侧边栏等。

示例：

<div style="height: 200px; background-color: #eee;">滚动区域上方内容</div>
<div style="background-color: lightblue; padding: 10px; position: sticky; top: 0;">
    这个元素会在滚动到顶部时粘住。
</div>
<div style="height: 800px; background-color: #f0f0f0;">滚动区域下方内容</div>

效果：当页面滚动到蓝色 div 顶部与视口顶部重合时，该 div 会固定在顶部，直到其父元素滚动出视口。

# 二、`z-index` 属性：控制元素的堆叠顺序

当多个定位元素（非 static 定位）发生重叠时，z-index 属性决定了它们在垂直方向上的堆叠顺序。

值：可以是正整数、负整数或 auto。数值越大，元素越靠上。
作用条件：z-index 只对 position 属性值为 relative, absolute, fixed, sticky 的元素有效。
堆叠上下文 (Stacking Context)：z-index 的作用范围受限于其所在的堆叠上下文。一个堆叠上下文由根元素 (<html>) 或 position 值为非 static 且 z-index 值为非 auto 的元素创建。

示例：

<div style="position: relative; width: 200px; height: 200px; background-color: red; z-index: 1;">
    红色盒子 (z-index: 1)
    <div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: blue; z-index: 2;">
        蓝色盒子 (z-index: 2)
    </div>
</div>
<div style="position: relative; top: -100px; left: 100px; width: 200px; height: 200px; background-color: green; z-index: 0;">
    绿色盒子 (z-index: 0)
</div>

效果：蓝色盒子在红色盒子之上，红色盒子在绿色盒子之上。

理解CSS定位是构建复杂、交互式网页布局的关键。通过灵活运用 position 和 z-index，可以精确控制元素的视觉呈现和堆叠关系。

← 显示属性单位 →

一ξひβθ光 i