面试题：说说 CSS 中 position: absolute 与 fixed 的共同点和区别

这是一个考察 CSS 定位机制核心知识的经典面试题。理解 absolute 和 fixed 的异同，是掌握页面布局的关键。

共同点

脱离文档流 (Removed from Normal Flow)：
- 两者都会使元素完全脱离正常的文档流。
- 元素在文档流中不占据任何空间，后续的块级元素会像它不存在一样进行布局（行内元素可能受影响）。
- 这可能导致其他元素“上移”或重叠。
基于偏移属性定位：
- 两者都通过 top, right, bottom, left 这四个偏移属性来精确控制元素的位置。
- 如果不设置这些属性，元素会保持在它原本的文档流位置（对于 absolute）或视口左上角（对于 fixed）。
创建新的层叠上下文 (Stacking Context)：
- 当 position 值为 absolute 或 fixed 时，该元素会创建一个新的层叠上下文（前提是其 z-index 不是 auto）。
- 这意味着其内部的 z-index 值是相对于该元素自身的。
默认宽高由内容决定：
- 脱离文档流后，元素的 width 和 height 默认由其内容撑开，不再像块级元素那样默认占满父容器宽度。

核心区别

特性	`position: absolute`	`position: fixed`
定位参照物 (Containing Block)	相对于最近的已定位祖先元素（即 `position` 为 `relative`, `absolute`, `fixed`, `sticky` 的祖先）。如果没有这样的祖先，则相对于初始包含块（通常是 `<html>` 元素或视口）。	相对于视口 (Viewport)，即浏览器窗口。它“固定”在屏幕的某个位置，不随页面滚动而移动。
是否随页面滚动	会随页面滚动而移动。它的位置是相对于其定位祖先的，当页面滚动时，如果祖先在文档流中，它也会随之滚动。	不会随页面滚动。无论页面如何滚动，它始终停留在视口的同一位置。
常见用途	* 模态框（Modal）的遮罩或内容（相对于 body 定位）。 * 下拉菜单、工具提示（Tooltip）。 * 精确定位的装饰元素。	* 固定导航栏（Sticky Header）。 * 返回顶部按钮。 * 固定侧边栏或广告。

深入理解：定位参照物 (Containing Block)

这是理解两者区别的关键。

absolute：
- 浏览器会向上遍历 DOM 树，寻找第一个 position 值不是 static 的祖先元素。
- 找到后，该祖先元素就是 absolute 元素的包含块，top/left 等值是相对于这个包含块的 padding box 计算的。
- 如果没有找到，则相对于初始包含块（视口，但受页面滚动影响）。
fixed：
- 定位参照物始终是视口。
- 它的 top/left 值是相对于视口的左上角计算的，不受任何祖先元素的影响（即使祖先有 transform 等属性，现代浏览器中 fixed 仍相对于视口）。

示例代码

<div class="container">
    <div class="absolute-box">Absolute</div>
    <div class="fixed-box">Fixed</div>
</div>

.container {
    position: relative;
    width: 300px;
    height: 200px;
    background: #f0f0f0;
    margin: 100px auto;
    overflow: auto; /* 使其可滚动 */
}

.absolute-box {
    position: absolute;
    top: 20px;
    left: 20px;
    /* 相对于 .container 定位 */
}

.fixed-box {
    position: fixed;
    top: 50px;
    right: 50px;
    /* 相对于视口定位，不随 .container 滚动 */
}

在这个例子中：

.absolute-box 会出现在 .container 内部距离顶部和左侧 20px 的位置。如果 .container 滚动，它也会随之滚动。
.fixed-box 会固定在浏览器窗口距离顶部 50px、右侧 50px 的位置，无论 .container 如何滚动，它都保持不动。

面试加分点

transform 的影响：在较老的浏览器规范中，transform 会创建包含块，影响 absolute 的定位，但不影响 fixed。现代浏览器已修正，fixed 始终相对于视口。
性能：fixed 元素通常会被浏览器优化（如提升到单独的图层），滚动时性能较好。
移动端的 position: fixed 问题：在 iOS Safari 等移动端浏览器中，position: fixed 在某些交互（如输入框弹起键盘）下可能出现抖动或失效，需要特殊处理（如监听 scroll 事件用 absolute 模拟）。
与 sticky 的关系：fixed 可以看作是 sticky 的一个特例，但 sticky 有更复杂的触发和释放逻辑。

总结回答示例

absolute 和 fixed 的共同点是它们都脱离文档流，通过 top/left 等属性定位，并能创建新的层叠上下文。

核心区别在于定位参照物：

absolute 相对于最近的已定位祖先元素，会随页面滚动而移动。

fixed 相对于浏览器视口，固定在屏幕上的某个位置，不随页面滚动。

因此，absolute 常用于局部精确定位（如弹窗、下拉菜单），而 fixed 常用于创建全局固定的 UI（如导航栏、返回顶部按钮）。

THE END

前端 CSS 面试题