position值设错致元素“消失”：absolute/fixed脱离文档流后未设top/left，叠于左上角或被overflow:hidden裁剪；relative最安全，不脱离流仅视觉偏移。
position 属性值写错导致元素消失不见
元素突然“没了”，不是被删了，是 position 值设成 absolute 或 fixed 后，脱离文档流又没配 top/left，直接叠在默认位置（通常是左上角），还可能被父容器 overflow: hidden 剪掉。
-
relative是最安全的起点：它不脱离流，只做相对自身偏移，不影响其他元素布局 -
absolute必须配合至少一个定位祖先（即position为relative、absolute或fixed的父级），否则会相对于 viewport 定位——这点常被忽略 -
fixed永远相对于视口，滚动时不动；但 iOS Safari 旧版本对fixed支持不稳定，慎用于底部导航等关键交互区域 - 别写
position: static来“重置”——它本来就是默认值，写了等于没写，还可能干扰 CSS 预处理器的覆盖逻辑
z-index 失效：不是数值不够大，是层叠上下文断了
z-index 不生效，90% 是因为父容器创建了新的层叠上下文，把子元素“关进小黑屋”了。比如父级加了 opacity: 0.99、transform: translateZ(0)、filter: blur(1px)，哪怕只是 0.99，也会触发新层叠上下文，子元素的 z-index 只在这个小屋里比大小。
- 检查父级是否意外触发了层叠上下文：用浏览器开发者工具看 computed 样式里的
will-change、transform、opacity等属性 - 想让子元素真正“浮出来”，得在它的最近层叠上下文祖先上提升
z-index，而不是狂加子元素的值 -
z-index: 9999和z-index: 999999在同一上下文里没区别；跨上下文时，祖先的z-index: 2可能压过子孙的z-index: 999999
top/right/bottom/left 对 relative 元素的“偏移陷阱”
给 position: relative 元素设 top: 20px，它确实往下挪了 20px，但**原来占的位置还在**——这和 absolute 完全不同。初学者常误以为它“移动后腾出空间”，结果发现下方元素没跟着上移，布局错乱。
-
relative的偏移是“视觉位移”，不影响文档流，适合做微调、悬停动画起点、或配合z-index控制遮罩层级 - 如果目标是“挪走并腾空”，该用
margin或transform: translateY()（后者不触发重排，性能更好） - 注意：设
top同时又设margin-top，两者会叠加，容易超预期偏移
父容器没设 height，absolute 子元素撑不开它
这是最隐蔽的布局断裂点：position: absolute 的子元素完全脱离文档流，父容器高度会坍缩为 0（除非有其他内容撑开），导致背景色消失、边框看不见、甚至 JS 获取 offsetHeight 返回 0。
- 不要指望
absolute子元素能撑开父级——它做不到。必须由非定位元素、伪元素或显式height/min-height来维持父容器高度 - 常见解法：父容器加
min-height: 1px（最小可靠高度），或用::before伪元素 +content: ""占位 - 若需响应式高度，优先考虑
flex或grid替代绝对定位，避免陷入“父高靠猜、子位靠调”的循环
定位不是“写上 position 就能动”，而是理解每个值如何改写元素与文档流的关系。最麻烦的往往不是代码写错，是改了一处，另一处悄悄失效——尤其是层叠上下文和文档流脱离这两个底层机制，不翻 MDN 的 Rendering Tree 章节，光靠试错很难稳住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
