加padding-top更稳妥，因margin-top可能引发滚动偏移或布局抖动；fixed导航栏遮挡内容时应设body padding-top，配合scroll-margin-top微调锚点跳转偏移。
fixed定位遮挡内容，该加padding还是margin？
给
加padding-top是更稳妥的选择，而不是margin-top。因为margin-top可能触发某些浏览器的滚动条偏移或布局抖动，而padding-top直接为固定头部预留空间，不干扰文档流。
常见错误：用margin-top推下主内容，结果在Safari或部分安卓WebView里出现滚动错位；或者把margin加在某个.main容器上，但该容器本身高度为0，导致无效。
- 若导航栏高度固定（如60px），直接写：
body { padding-top: 60px; box-sizing: border-box; } - 若高度响应式变化（比如移动端变矮、桌面端变高），需配合JS动态更新
padding-top值，或改用position: sticky替代 - 避免对
html或body设margin——它可能影响scrollIntoView()行为，尤其在锚点跳转时
absolute元素盖住兄弟节点，z-index没反应？先查定位上下文
z-index只对已定位元素生效，且必须在同一个层叠上下文中比较。很多“调了z-index没用”的情况，其实是父容器没设position: relative，导致absolute子元素回退到视口定位，直接叠在兄弟元素上面。
典型现象：两个同级div，一个放absolute弹窗，一个放input，弹窗怎么也盖不住input——大概率是弹窗的父容器没设position: relative，或者父容器本身有opacity: 0.99这类触发新层叠上下文的属性。
- 确保
absolute元素的**直接父容器**设了position: relative（最常用）或其它非static值 - 检查父级是否意外带了
transform、filter、will-change或opacity小于1——这些都会创建新层叠上下文，把子元素的z-index锁死在内部 - 用Chrome DevTools右键元素 → “Show stacking context”，快速定位哪个祖先触发了隔离
伪元素::before/:after挡住链接，pointer-events: none能直接解决吗？
能，但必须作用在伪元素本身，不是父元素。默认情况下::before和::after参与事件流，哪怕只是画个阴影或渐变边框，也会吃掉点击。
常见误操作：给父容器加pointer-events: none，结果整个容器都不可点了；或者只给父元素设z-index: -1，但在父容器已建立层叠上下文时完全无效。
- 正确写法：
.overlay::before { pointer-events: none; } - 如果伪元素里需要交互（比如hover显示提示），就得拆开：一个纯视觉伪元素 + 一个透明但
pointer-events: auto的空span覆盖其上 - 别依赖
opacity: 0或visibility: hidden——它们仍会拦截事件；只有display: none或pointer-events: none才真正释放点击流
scrollIntoView跳转后内容被fixed导航栏盖住，怎么微调偏移？
用scroll-margin-top是最轻量的解法，不需要JS计算或监听滚动。它告诉浏览器：“当我滚动到这个元素时，请把它顶部和视口顶部保持指定距离”。
注意：这个属性作用于目标元素自身，不是导航栏；而且它只在scrollIntoView()或锚点跳转时生效，不影响日常滚动。
- 示例：
#section-2 { scroll-margin-top: 72px; }（假设导航栏高72px） - 值可以是
px、rem、vh，甚至calc(72px + 1rem)，但别用百分比（不支持） - 兼容性没问题：Chrome 69+、Firefox 68+、Safari 15.4+、Edge 79+均已支持；老版本可降级为JS手动
window.scrollBy()
pointer-events: none层叠时，事件穿透顺序严格按渲染树绘制顺序，不是DOM顺序。点一下，务必确认下层链接真触发了click，别只信桌面预览。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
