【CSS篇】absolute与fixed的共同点与不同点详解在 CSS 中，position: absolute 和 p

在 CSS 中，position: absolute 和 position: fixed 是两种常见的定位方式，它们都能让元素脱离文档流并进行精确定位。虽然功能相似，但在行为和使用场景上存在明显差异。

本文将系统讲解：

一、共同点（Common Features）

特性	描述
✅ 改变行内元素的显示方式	都会使 `display` 属性被强制转换为 `block` 或 `inline-block`，即使原本是 `span` 等行内元素也会具有块级特性。
✅ 脱离文档流	元素不再占据页面的空间，其他元素会像它不存在一样进行布局。
✅ 层级覆盖能力	可以通过 `z-index` 控制层叠顺序，覆盖普通文档流中的元素。
✅ 配合 top/right/bottom/left 使用	都可以通过这四个属性精确控制位置。

📌 示例：

.box {
  position: absolute; /* 或 fixed */
  top: 10px;
  left: 20px;
}

无论该元素是 <div> 还是 <span>，都会表现得像一个块级或 inline-block 元素。

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

.child 将以 .parent 为参考点定位。

.child {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.child 将始终固定在屏幕右下角，不管页面如何滚动。

场景	推荐使用	说明
下拉菜单、弹出框	`absolute`	通常嵌套在相对定位的父元素中，便于定位控制
悬浮按钮、回到顶部	`fixed`	页面滚动时保持可见，用户体验更佳
滑动吸顶效果	`fixed`	如导航栏随页面滚动固定在顶部
工具提示、气泡提示	`absolute`	依赖于某个元素的位置，适合相对定位容器
模态框遮罩层	`fixed` 或 `absolute`	若需覆盖整个视口推荐用 `fixed`，否则可用 `absolute`

✅ 可能原因：

✅ 解决方法：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

✅ 可能原因：

✅ 解决方法：

absolute 和 fixed 都能让元素脱离文档流并自由定位，但 absolute 是相对于祖先元素定位，fixed 是相对于浏览器视口定位，常用于实现固定位置的 UI 组件。