小屏下fixed元素易遮挡内容，需通过媒体查询调整位置、缩小/隐藏非核心元素、改用sticky定位或为主内容留安全间距来解决。

小屏下 fixed 定位元素（比如悬浮按钮、顶部导航栏、侧边工具栏）容易遮挡正文或关键操作区域，本质是视口高度变小后，fixed 元素仍按原尺寸和坐标占据空间，而页面内容未做适配。解决核心思路是：在小屏下主动调整它的位置、尺寸，或临时隐藏。

用媒体查询重新定位 fixed 元素

当屏幕高度不足（如手机竖屏）时，把原本固定在右下角的客服按钮上移一点，避开手指常点的底部区域。

• 用 min-height 或 max-height 判断设备类型更可靠，比只看宽度更贴合“遮挡”场景（例如 iPad 竖屏宽但矮）
• 示例：让右下角按钮在视口高度 ≤ 600px 时上移 80px

缩小或隐藏非核心 fixed 元素

小屏优先保内容可读性和可操作性，装饰性或次要功能的 fixed 元素可降级处理。

• 图标类悬浮按钮可缩为更小尺寸，或仅保留图标（去掉文字）
• 非紧急功能（如“回到顶部”）在小屏直接 display: none
• 避免用 visibility: hidden 或 opacity: 0 —— 它们仍占布局空间，无法解决遮挡

改用 sticky 替代 fixed（适合导航类）

顶部导航栏如果用 fixed，在小屏常挡住首屏内容；换成 position: sticky 可让它随滚动自然出现，初始不占位。

• 需确保父容器有高度且正常流式布局（sticky 依赖最近的滚动祖先）
• 配合 top: 0 和媒体查询，小屏下还可进一步降低 z-index 避免盖住表单输入框

给页面主体留出安全间距

如果 fixed 元素必须存在（如底部 Tab 栏），就在 body 或主内容区加 padding-bottom，值等于 fixed 元素高度。

• 用 CSS 自定义属性统一管理，方便媒体查询中同步更新
• 示例：:root { --tab-height: 56px; }
  @media (max-height: 600px) { :root { --tab-height: 48px; } }
  main { padding-bottom: var(--tab-height); }

基本上就这些。关键是别把 fixed 当成“一设永逸”，小屏要主动干预——调位置、缩尺寸、换策略、留空隙，四选一或组合用，遮挡问题基本就解了。