CSS 定位（Position）学习笔记

UIUV
81 阅读4分钟

CSS 定位（Position）学习笔记

在网页布局中，定位（Positioning） 是控制元素位置的核心手段之一。CSS 提供了多种 position 属性值，用于改变元素在页面中的默认布局行为。本文将系统梳理 position 的各种取值及其对文档流的影响，并结合代码示例深入理解其使用场景。

一、什么是文档流？

文档流（Normal Flow） 是 HTML 元素在页面中默认的排列方式：

  • 块级元素：从上到下垂直排列，每个元素独占一行。
  • 行内元素：从左到右水平排列，在同一行内依次排列。

当一个元素处于文档流中时，它会按照正常的排版规则影响其他元素的位置。而通过设置 position 属性或 display: none，可以让元素脱离文档流，从而不影响其他元素的布局。

脱离文档流的方式：

  • display: none;：完全隐藏元素，不占用任何空间。
  • position: absolute;
  • position: fixed;

注意：position: relative 和 position: sticky 不会脱离文档流。

二、position 的五种取值详解

1. static（静态定位）

  • 默认值，所有元素初始状态都是 position: static。
  • 元素按照正常文档流进行布局。
  • 设置 top、left 等偏移属性无效。
  • 常用于取消已有定位，恢复默认行为。
.element {
  position: static;
}

2. relative（相对定位）

  • 元素仍在文档流中，原始位置会被保留。
  • 定位参考点是自身在文档流中的原始位置。
  • 可通过 top、right、bottom、left 进行偏移。
  • 不影响其他元素布局，但子元素可将其作为定位参考。
示例：
<div class="parent">
  <div class="child"></div>
</div>
<div class="box"></div>

.parent {
  width: 500px;
  height: 500px;
  background-color: pink;
  position: relative;
  left: 100px;
  top: 100px;
}
.child {
  width: 300px;
  height: 200px;
  background-color: skyblue;
}
.box {
  width: 100px;
  height: 100px;
  background-color: green;
}

.parent 向右下偏移 100px，但 .box 仍紧接在 .parent 原始位置下方，说明 .parent 未脱离文档流。

3. absolute（绝对定位）

  • 脱离文档流，不再占据空间。

  • 定位参考点是最近的具有非 static 定位的祖先元素。

    • 若无，则相对于 <body> 定位。

  • 常用于弹窗、遮罩、精确布局等场景。

示例：
<div class="parent">
  <div class="child"></div>
</div>
<div class="box">hello world</div>

.parent {
  position: relative; /* 关键：提供定位上下文 */
  width: 550px;
  height: 550px;
  background-color: pink;
}
.child {
  position: absolute;
  right: 100px;
  width: 300px;
  height: 200px;
  background-color: skyblue;
}
.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: green;
}

.child 相对于 .parent 定位；.box 因无定位父容器，相对于 <body> 居中。

4. fixed（固定定位）

  • 脱离文档流。
  • 相对于浏览器视口（viewport） 定位，不随页面滚动而移动。
  • 常用于导航栏、悬浮按钮、广告等。
示例：
.child {
  position: fixed;
  right: 100px;
  bottom: 100px;
  width: 300px;
  height: 200px;
  background-color: blue;
}

无论页面如何滚动，该元素始终固定在右下角 100px 处。

5. sticky（粘性定位）

  • 混合定位：在 relative 和 fixed 之间动态切换。
  • 行为类似 relative，但当滚动到指定阈值（如 top: 100px）时，变为 fixed。
  • 必须指定 top、bottom 等阈值，否则无效。
  • 不脱离文档流，原始位置仍被保留。
示例：
.box {
  position: sticky;
  top: 100px;
  width: 100px;
  height: 100px;
  background-color: green;
}
body {
  height: 2000px; /* 确保可滚动 */
}

当页面滚动使 .box 到达距离顶部 100px 时，它会“粘”在该位置，不再随内容滚动。

三、脱离文档流的影响对比

方式是否脱离文档流是否占用空间是否影响其他元素
display: none✅❌❌
position: absolute✅❌❌
position: fixed✅❌❌
position: relative❌✅❌（仅视觉偏移）
position: sticky❌✅❌
opacity: 0❌✅✅（仍占位）

⚠️ 注意：visibility: hidden 与 opacity: 0 类似，元素不可见但仍占位。

四、定位上下文（Containing Block）

  • absolute 和 fixed 元素的定位依赖于定位上下文。

  • 对于 absolute：

    • 向上查找第一个 position 不为 static 的祖先。
    • 若找不到，则以 <body> 为参考。

  • 对于 fixed：

    • 始终以视口为参考，与父元素无关。
动态切换示例：
<div class="parent">
  <div class="child"></div>
</div>
<script>
  setTimeout(() => {
    document.querySelector('.parent').style.position = 'static';
  }, 5000);
</script>

初始时 .parent 为 relative，.child（若为 absolute）以其为参考；5 秒后变为 static，.child 将改以 <body> 为参考，位置突变。

五、常见应用场景

  1. 居中布局

    .center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

  2. 模态框（Modal）
    使用 position: fixed 覆盖整个视口。

  3. 吸顶导航
    使用 position: sticky; top: 0; 实现滚动到顶部时固定。

  4. 图标定位
    在按钮内用 position: absolute 精确定位小图标。

六、注意事项

  • 避免滥用 absolute/fixed，可能导致响应式布局失效。
  • z-index 仅对定位元素（非 static）生效。
  • sticky 在某些旧浏览器中支持不佳，需测试兼容性。
  • 脱离文档流的元素可能覆盖其他内容，注意层级管理。

总结

CSS 的 position 属性是布局的基石之一。理解每种定位方式对文档流的影响，能帮助我们更精准地控制页面结构：

  • 保留文档流：relative、sticky
  • 脱离文档流：absolute、fixed
  • 彻底移除：display: none

掌握这些特性，结合实际项目需求灵活运用，才能写出高效、健壮的 CSS 布局代码。

avatar
文章
阅读
粉丝