负margin仅位移元素而不改变层叠顺序，z-index无效除非元素已定位且未被父级新层叠上下文限制；fixed定位遮挡需用padding-top避让，替代方案有transform、clip-path等。
负margin导致元素遮挡，根本不是z-index没设对
负margin本身不创建层叠上下文，它只是把元素“物理挪动”——位置变了，但绘制顺序仍由父容器的层叠上下文决定。硬加z-index没用，除非该元素已定位（position: relative、absolute或fixed）且未被父级新层叠上下文限制。
常见错误现象：margin-top: -20px后，元素看起来“盖住了”后面兄弟块，但z-index: 999完全无效；调试时发现Chrome Layers面板里它甚至没生成独立合成层。
- 检查父容器是否设置了
opacity、transform或filter——这些会隐式创建新层叠上下文，子元素的z-index只在内部生效 - 确认目标元素的
position值不是static（默认值），否则z-index被忽略 - 用
outline: 1px solid red临时加边框，确认元素实际渲染位置是否真与预期重叠
fixed定位遮挡内容？别调z-index，先给body留空间
position: fixed元素脱离文档流，后续内容从视口顶部开始布局，自然被盖住。这不是层级问题，是布局逻辑缺失。
典型场景：顶部导航栏固定后，正文第一段被遮住。
- 最直接方案：给
body加padding-top，值等于导航栏高度（如padding-top: 64px） - 高度不固定时（如响应式导航随屏幕缩放变高），避免用
margin-top——它可能触发滚动条偏移；改用padding-top配合JS动态更新，或换用position: sticky - 慎用
body { margin: 0 }重置——某些浏览器会因此改变滚动行为，优先用*, ::before, ::after { margin: 0; padding: 0; }
Grid或Flex中用负margin抵消gap？小心首尾溢出和可访问性
负margin不能真正“删除”gap，它只是视觉补偿。在Flex中强行统一设margin-left: -0.5rem会导致第一个子项左越界，可能触发横向滚动条。
- 安全写法：用
:not(:first-child):not(:last-child)只作用于中间项；或改用margin-inline-start: calc(-1 * var(--gap-size))配合CSS变量 - Grid布局下不推荐负margin抵消
gap——浏览器按网格线计算位置，负margin只影响渲染层叠，易导致焦点框错位、屏幕阅读器标签偏移 - 移动端注意：固定像素值（如
-12px）在系统字体放大或视口缩放时失准，百分比值（如-1%）因基于父宽而非视口宽也不可靠
替代负margin的更稳方案：transform、clip-path、padding补偿
很多遮挡问题本质是布局模型没理清。与其反复调试z-index和负margin，不如换种方式达成相同视觉效果。
- 微调位移：用
transform: translateY(-10px)代替margin-top: -10px——不脱离文档流，天然触发合成层，层级更可控 - 边缘裁剪：用
clip-path: inset(0 0 10px 0)“切掉”底部多余区域，比靠负边距“抠”更稳定，尤其适配高DPI屏 - 主动避让：固定导航栏场景，
body加padding-top是唯一无需JS、兼容性最好的方案；若用position: absolute，确保其父容器设了position: relative，否则它会逃逸到视口级定位
负margin的副作用常在动态插入DOM、visibility: hidden切换或跨浏览器测试时才暴露。真要使用，优先统一在父容器设position: relative和z-index，子元素只负责位移，不参与层叠决策。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
