[猫头虎全栈面试宝典]：CSS 相对定位和绝对定位有什么区别？

猫头虎

发布于 2025-06-01 15:10:30

23200

代码可运行

文章被收录于专栏：猫头虎博客专区猫头虎博客专区

运行总次数：0

代码可运行

[猫头虎全栈面试宝典]：CSS 相对定位和绝对定位有什么区别？

💡 适用人群：前端开发者 | CSS 爱好者 | 面试冲刺者 🕒 阅读时长：10分钟，知识点浓缩高能！ 🐾 学习收益：理解 CSS 相对定位和绝对定位的本质区别，掌握实际项目中的应用技巧！

🦁 开篇猫语：为什么学这个很重要？

猫头虎碎碎念： CSS 定位是网页布局的核心能力，无论是简单的按钮微调，还是复杂的弹窗定位，都离不开相对定位和绝对定位的熟练应用。面试官喜欢围绕这些问题深挖应用场景和逻辑，今天猫头虎为你详细解析这道经典面试题！

⏩ 一句话重点： 掌握 CSS 定位的本质区别，让你不仅能答对，还能轻松给出实战案例。

作者简介

猫头虎是谁？

大家好，我是猫头虎，猫头虎技术团队创始人，也被大家称为猫哥。我目前是COC北京城市开发者社区主理人、COC西安城市开发者社区主理人，以及云原生开发者社区主理人，在多个技术领域如云原生、前端、后端、运维和AI都具备丰富经验。

我的博客内容涵盖广泛，主要分享技术教程、Bug解决方案、开发工具使用方法、前沿科技资讯、产品评测、产品使用体验，以及产品优缺点分析、横向对比、技术沙龙参会体验等。我的分享聚焦于云服务产品评测、AI产品对比、开发板性能测试和技术报告。

目前，我活跃在CSDN、51CTO、腾讯云、阿里云开发者社区、知乎、微信公众号、视频号、抖音、B站、小红书等平台，全网粉丝已超过30万。我所有平台的IP名称统一为猫头虎或猫头虎技术团队。

我希望通过我的分享，帮助大家更好地掌握和使用各种技术产品，提升开发效率与体验。

正文

🦁 猫头虎温馨提示： 面试不只是刷题，理解和举一反三才是制胜法宝！今天，猫头虎为你整理了「CSS 定位」的高频考点，希望能成为你上岸的秘密武器！✨

📌 面试全景图

猫头虎整理了关于 CSS 定位的高频考点与延伸内容：

[基础问题]：什么是相对定位？什么是绝对定位？
[进阶问题]：两者的主要区别和适用场景？
[实战问题]：如何用它们解决实际开发需求？

🔍 1. 基础概念必会：定义+场景

🐾 问题 1：什么是相对定位和绝对定位？

面试官问法：

简单描述一下相对定位和绝对定位的工作原理？
它们分别适用于哪些场景？

1.1 相对定位 (`position: relative;`)

概念： 相对定位是相对于元素自身的默认位置，通过 top、left、right 和 bottom 属性调整位置，原始位置仍占据布局空间。

场景： 适用于微调元素位置，同时作为子元素绝对定位的参考点。

示例代码：

<div style="position: relative; top: 20px; left: 30px; background-color: lightblue;">
  相对定位示例
</div>

效果：

元素相对于其默认位置向下偏移 20 像素，向右偏移 30 像素。
原始位置仍占据空间。

1.2 绝对定位 (`position: absolute;`)

概念： 绝对定位是相对于最近的已定位祖先元素进行定位，如果没有找到，则相对于根元素（<html> 或 <body>）定位。

场景： 用于精确布局，例如弹窗、悬浮菜单等。

示例代码：

<div style="position: relative; width: 300px; height: 200px; background-color: lightgray;">
  <div style="position: absolute; top: 10px; left: 20px; background-color: pink;">
    绝对定位示例
  </div>
</div>

效果：

粉色块相对于灰色容器的左上角偏移 10 像素和 20 像素。
如果灰色容器没有 position: relative;，粉色块会相对于整个页面定位。

🔍 2. 进阶问题：两者的主要区别

🐾 问题 2：相对定位和绝对定位的区别是什么？

特性	相对定位 (relative)	绝对定位 (absolute)
是否占据文档流	占据文档流位置	脱离文档流，不占据空间
定位基准	元素自身的默认位置	最近的已定位祖先元素（或根元素）
对周围元素的影响	保留原有位置，对周围元素有影响	不保留原有位置，对周围元素无影响
适用场景	小范围偏移，例如微调位置	精确布局，例如弹窗、悬浮框、工具提示等

🐾 猫头虎提醒： 面试中，明确这两者的区别是基础，结合实际项目场景进行说明更能打动面试官！

🔍 3. 实战问题：开发中的应用技巧

🐾 问题 3：如何结合相对定位和绝对定位实现复杂布局？

场景： 假设需要在一个固定宽高的容器中，精确定位一个悬浮按钮。

解决方案：

父元素设置 position: relative; 作为定位基准。
子元素设置 position: absolute;，通过偏移控制其位置。

示例代码：

<div style="position: relative; width: 400px; height: 300px; background-color: lightgray;">
  <button style="position: absolute; bottom: 10px; right: 10px;">
    悬浮按钮
  </button>
</div>

效果： 按钮被固定在容器的右下角，且不影响其他元素的布局。

🐾 猫头虎提醒： 面试官可能追问：

「如果容器尺寸动态变化，如何保持按钮位置不变？」
「如何兼容不同屏幕尺寸？」答案：可以通过 百分比单位 或 flex 布局进一步优化。

🌟 开放性问题与优化思路

🐾 问题 4：如何用绝对定位实现一个响应式弹窗？

答题思路：

核心解决方案： 使用 absolute 和媒体查询调整位置。
补充背景： 考虑屏幕尺寸变化及兼容性问题。
扩展思路： 提到团队协作优化方案，如使用 CSS-in-JS。

代码示例：

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 400px;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}