CSS定位元素如何适配不同屏幕分辨率

根本原因是父容器未锚定好：虽设position: relative，但宽高无约束（如width: 100%缺max-width、高度依赖内容撑开），导致小屏塌缩、百分比定位失准；同时需避免flex与relative混用、慎用vh/vw、多屏DPI下需归一化坐标。

absolute 定位错乱，根本原因是父容器没锚定好

绝对定位元素在不同分辨率下“飘走”，90% 是因为它的父容器虽然写了 position: relative，但自身宽度/高度没约束——比如父容器用了 width: 100% 却没限制最大宽度，或高度依赖内容撑开，在小屏下直接塌缩，子元素的 top: 20% 就失去参照基准。

实操建议：

1. 给 absolute 的父容器加一个明确的“安全宽度”容器，例如 .safe-container { width: 1200px; margin: 0 auto; }，再对它设 position: relative
2. 避免父容器同时使用 display: flex 和 position: relative —— Flex 会干扰块级流，导致百分比计算异常
3. 父容器高度不要靠内容撑开，必须显式定义：用 min-height: 100vh 或固定值（如 height: 800px）+ 媒体查询分段控制

fixed 元素在超宽屏上“消失”，其实是视口定位失焦

position: fixed 的 top/left 永远相对于 viewport，不是页面内容。当用户横向滚动（尤其在 3440×1440 这类带鱼屏），内容区滑出左侧，而 fixed 元素卡在原始 viewport 左侧——人眼看不到，误以为“消失”。

实操建议：

1. 禁用硬编码像素偏移，改用 left: max(0px, calc(50% - 600px)) 锚定在内容中心区域
2. 右侧工具栏等场景，优先用 position: sticky + 父容器 overflow-x: auto，它随文档流滚动，不脱离上下文
3. 检查 html 和 body 是否有 width: 100vw —— 这会强制产生隐藏横向滚动条，让 fixed 的定位基准错乱

多屏 DPI 不一致时 getBoundingClientRect() 返回坐标不准

Windows 多显示器缩放不统一（主屏 125%，副屏 100%）时，getBoundingClientRect().left 返回的是混合了不同设备像素比（dpr）的 CSS 像素值，结果偏移几十像素很常见。Safari 和 Chrome 行为还不一致。

实操建议：

1. 别拿 getBoundingClientRect() 的结果直接赋给 style.left —— 先除以 window.devicePixelRatio 归一化（仅 Chrome/Edge 可靠；Safari 需额外判断 matchMedia 缩放状态）
2. 做 tooltip 或拖拽定位时，改用 MouseEvent.clientX/clientY —— 它们天然适配多屏 DPI 差异，无需归一化
3. 测试阶段务必在 Windows 设置里开启「让所有显示器使用相同缩放级别」，否则开发机测不出真实问题

vh/vw 在 macOS 全屏模式下行为异常

macOS 全屏浏览器中，100vh 会包含地址栏高度（即使已隐藏），导致元素被顶出可视区；100vw 在某些 Safari 版本中会忽略垂直滚动条宽度，造成横向溢出。

实操建议：

1. 关键布局慎用 100vh，改用 min-height: 100vh + height: 100dvh（现代浏览器支持 dvh，代表动态视口高度）
2. 全屏场景下，用 @media (display-mode: fullscreen) 单独覆盖 vh/vw 行为
3. macOS 测试必须真机验证，模拟器无法复现地址栏占位问题

实际项目里最常被忽略的，是把 position: absolute 当成“万能居中”直接套用，却不检查父容器是否真的建立了稳定、可预测的定位上下文——它不是独立存在，而是强依赖父级的尺寸稳定性与定位模式。