固定定位遮挡正文需给body加padding-top预留空间；绝对定位弹窗要锚定position:relative父级并用scroll-margin-top防键盘遮挡；Flex/Grid子项溢出需设min-width:0或minmax(0,1fr)。
固定定位元素（position: fixed）遮挡正文怎么办
最常见的遮挡发生在 header 或 nav 使用 position: fixed 后，滚动时正文顶部被盖住。这不是“内容没写出来”，而是布局层叠和空间未预留导致的视觉遮挡。
- 根本解法不是调
z-index，而是给body或主容器加padding-top，值等于固定头部高度（如60px） - 响应式下头部高度会变（比如移动端折叠为
50px），必须用媒体查询同步调整：@media (max-width: 768px) { body { padding-top: 50px; } } - 避免用
margin-top代替padding-top：外边距不参与父容器高度计算，可能引发滚动条错位或底部空白异常
绝对定位弹窗（position: absolute）压住表单输入框怎么破
在模态框、下拉选择器等场景中，position: absolute 元素若父容器未设 position: relative，会相对于视口定位，容易与 input、textarea 重叠，尤其在 iOS Safari 中触发虚拟键盘后更明显。
- 确保弹窗父级有
position: relative，且该父级在 DOM 中紧邻触发控件（如按钮下方） - 对输入类组件，可加
scroll-margin-top防止聚焦后被遮挡：input, textarea { scroll-margin-top: 80px; }（配合scroll-behavior: smooth效果更自然） - 不要依赖
top: 100%让下拉贴着输入框——它不感知键盘高度；改用 JavaScript 动态计算位置，或使用popper.js类库处理边界检测
Flex/Grid 容器内子项溢出被裁切（overflow: hidden 隐式生效）
当父容器设了 display: flex 或 display: grid，又没显式定义 overflow，某些浏览器（尤其是 Safari）会对子项做隐式裁剪，导致文字截断、图标消失、下拉箭头不见。
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
- 检查父容器是否意外继承了
overflow: hidden（比如从框架 CSS 或重置样式中来） - 对 Flex 容器，子项默认
min-width: auto，在窄屏下可能撑破容器；显式设min-width: 0允许收缩：.flex-container > * { min-width: 0; } - Grid 布局中，若用
grid-template-columns: 1fr auto，右侧固定宽列可能导致左侧1fr无收缩空间，此时加minmax(0, 1fr)替代1fr
媒体查询中留白（padding/margin）没随内容缩放而调整
很多响应式页面在小屏下仍保留桌面端的 padding: 2rem，导致可用宽度急剧缩水，文字挤在一起，按钮点不到——这本质是“留白没响应”，而非内容被遮挡。
- 优先用相对单位：把
padding: 2rem换成padding: clamp(0.5rem, 4vw, 1.5rem)，让留白在小屏收缩、大屏舒展 - 避免在多个断点里重复写相同留白；可用 CSS 自定义属性统一控制：
:root { --content-padding: 1.5rem; } @media (max-width: 768px) { :root { --content-padding: 1rem; } } main { padding: var(--content-padding); } - 注意
box-sizing: border-box必须全局启用，否则padding会额外增加元素总宽，加剧溢出
实际项目里，遮挡问题八成出在「固定定位没留空间」+「绝对定位没锚定父级」+「Flex 子项不收缩」这三者叠加。调试时先关掉所有 position: fixed/absolute，看内容是否回归正常流；再逐个打开，观察哪一层开始破坏布局节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
