小屏下fixed元素易遮挡内容，需通过媒体查询调整位置、缩小/隐藏非核心元素、改用sticky定位或为主内容留安全间距来解决。
小屏下 fixed 定位元素（比如悬浮按钮、顶部导航栏、侧边工具栏）容易遮挡正文或关键操作区域，本质是视口高度变小后，fixed 元素仍按原尺寸和坐标占据空间，而页面内容未做适配。解决核心思路是：在小屏下主动调整它的位置、尺寸，或临时隐藏。
用媒体查询重新定位 fixed 元素
当屏幕高度不足（如手机竖屏）时，把原本固定在右下角的客服按钮上移一点，避开手指常点的底部区域。
- 用 min-height 或 max-height 判断设备类型更可靠，比只看宽度更贴合“遮挡”场景（例如 iPad 竖屏宽但矮）
- 示例：让右下角按钮在视口高度 ≤ 600px 时上移 80px
#help-btn {
bottom: 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 当成“一设永逸”，小屏要主动干预——调位置、缩尺寸、换策略、留空隙，四选一或组合用，遮挡问题基本就解了。
