dom结构错位导致z-index失效：检查elements面板中节点缩进是否跳级、同级元素是否被浏览器移出原容器、非法子元素（如ul内div）或未闭合标签引发的树形错乱。

Elements面板里怎么一眼看出层级被遮挡是结构问题还是CSS问题

遮挡不是样式写错了，而是DOM树本身嵌套错位导致的z-index失效或父容器意外截断。打开DevTools切到Elements面板，重点看三点：节点缩进是否突兀跳级、同级元素是否被浏览器强行移出原父容器、某个

展开后内部突然出现本不该在那里的祖先节点（比如footer出现在header里）。如果看到

下面直接挂着
，或者里冒出来一个
，那就是结构紊乱——浏览器已自动重排，但z-index再高也盖不住被踢出去的兄弟节点。
table/ul/ol内塞错子元素会直接破坏z-index层级
浏览器对语义容器的子元素类型有硬性限制：table只接受thead/tbody/tr；ul和ol只接受li；select只接受option或optgroup。一旦往里面塞div、p或span，解析器会立即将其“踢出”当前容器，变成同级节点。结果就是：你给ul设了z-index: 10，但里面的div实际在ul外面，不受控制，还可能被后续兄弟元素遮盖。

html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
下载
• 用document.querySelectorAll('ul > div')快速扫一遍有没有非法直系子元素
• 检查table结构时，右键→Edit as HTML改个空格，如果整个tr消失或错位，说明原始嵌套已失真
• ul里用div做列表项？改用li + display: flex更安全
未闭合标签会让后续几百行HTML全部被错误包裹
一个漏掉的可能让接下来所有内容都变成它的子节点，导致原本该浮在顶部的弹窗被塞进某个卡片内部，z-index再大也没用。修复不能只盯着遮挡现场——document.querySelectorAll('*').length查节点总数，如果远超预期（比如写了20个元素却返回300+），大概率是某处标签没闭合。
• 用VS Code装Auto Close Tag插件，敲<div>回车就自动补<code> ，漏了立刻可见
• 保存时跑tidy-html5命令，它会报missing 这类错误，Prettier做不到
• W3C Validator报end tag for element div omitted时，别只修最后一行，往前翻三屏找开标签
fixed定位元素被遮挡常因结构错乱放大渲染差异
position: fixed本该脱离文档流，但若父容器因结构错误被浏览器强行重建（比如<div><p>text</p></div>
被重排成两个独立块），fixed元素的锚点可能落在错误的视觉视口上。Safari和Chrome安卓对此处理不一致，同一段代码在iOS上被顶起，在安卓上却稳住——表面是兼容性问题，根源是DOM树本身不干净。
• 先确保、、都完整闭合，否则fixed行为不可靠
• 避免在fixed元素内部写复杂嵌套，尤其别在里面放table或ul——结构一乱，fixed就失效
• 真机调试时打开visualViewport API观察高度变化，比单纯读window.innerHeight更准
结构紊乱的问题从来不在“遮不遮得住”，而在“浏览器到底把你的HTML当成了什么”。修CSS只是临时糊住裂缝，真正要动的是那一行漏掉的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！