position: relative 在响应式设计中用于微调元素位置及作为绝对定位的参考容器，通过配合媒体查询可实现不同屏幕下的动态定位调整，且不脱离文档流，避免布局错乱，适用于图标、标签、卡片等组件的精确定位与视觉优化。
在响应式设计中，position: relative虽然不像 Flexbox 或 Grid 那样主导布局，但它在控制元素定位方面依然扮演着重要角色。合理使用 relative 定位，可以帮助开发者实现更灵活、更可控的响应式效果。
相对定位的基本作用设置position: relative的元素会相对于其正常文档流中的位置进行偏移。通过 top、right、bottom、left 属性调整位置，但不会脱离文档流，也不会影响其他元素的排列。
这个特性让它非常适合用于微调元素位置，比如图标、标签或提示框在不同屏幕尺寸下的精确定位。
作为绝对定位的参考容器在响应式布局中，经常需要将某个子元素（如提示文字、角标）精确地放在父元素的某个角落。这时可以将父元素设为position: relative，子元素设为position: absolute，子元素就会相对于父元素定位。
立即学习“前端免费学习笔记（深入）
”；
例如：图片右上角的“新”标签，在手机端和桌面端都能保持对齐父容器宽度随屏幕变化时，内部绝对定位元素也能随之调整位置配合媒体查询实现动态定位在不同屏幕尺寸下，可以通过媒体查询修改 relative 元素的偏移值，实现响应式的位置调整。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载比如一个按钮在大屏上向右偏移 20px，在小屏上偏移 10px，避免与边框贴得太近：@media (max-width: 768px) {.btn { top: 10px; }}@media (min-width: 769px) {.btn { top: 20px; }}避免破坏流动布局相比于 fixed 或 absolute，relative 不会让元素脱离文档流，因此在响应式设计中更安全。即使调整了位置，页面整体结构依然保持稳定，不会出现内容重叠或空白错乱的问题。
特别适合用在卡片组件、导航项或表单元素中，既保留原有布局流，又能做视觉优化。
基本上就这些。relative 虽然简单，但在细节处理上很实用，是响应式设计中不可忽视的基础工具。