HTML文档结构紊乱引发网页层级遮挡异常全场景排查

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

下面直接挂着

，或者

里冒出来一个

，那就是结构紊乱——浏览器已自动重排，但z-index再高也盖不住被踢出去的兄弟节点。

table/ul/ol内塞错子元素会直接破坏z-index层级

浏览器对语义容器的子元素类型有硬性限制：table只接受thead/tbody/tr；ul和ol只接受li；select只接受option或optgroup。一旦往里面塞p、p或span，解析器会立即将其“踢出”当前容器，变成同级节点。结果就是：你给ul设了z-index: 10，但里面的p实际在ul外面，不受控制，还可能被后续兄弟元素遮盖。

• 用document.querySelectorAll('ul > p')快速扫一遍有没有非法直系子元素
• 检查table结构时，右键→Edit as HTML改个空格，如果整个tr消失或错位，说明原始嵌套已失真
• ul里用p做列表项？改用li + display: flex更安全

未闭合标签会让后续几百行HTML全部被错误包裹

一个漏掉的可能让接下来所有内容都变成它的子节点，导致原本该浮在顶部的弹窗被塞进某个卡片内部，z-index再大也没用。修复不能只盯着遮挡现场——document.querySelectorAll('*').length查节点总数，如果远超预期（比如写了20个元素却返回300+），大概率是某处标签没闭合。

• 用VS Code装Auto Close Tag插件，敲<p>回车就自动补<code>

  ，漏了立刻可见

• 保存时跑tidy-html5命令，它会报missing 这类错误，Prettier做不到
• W3C Validator报end tag for element p omitted时，别只修最后一行，往前翻三屏找开标签

fixed定位元素被遮挡常因结构错乱放大渲染差异

position: fixed本该脱离文档流，但若父容器因结构错误被浏览器强行重建（比如<p><p>text</p></p>

立即学习“前端免费学习笔记（深入）”；

被重排成两个独立块），fixed元素的锚点可能落在错误的视觉视口上。Safari和Chrome安卓对此处理不一致，同一段代码在iOS上被顶起，在安卓上却稳住——表面是兼容性问题，根源是DOM树本身不干净。

• 先确保、、都完整闭合，否则fixed行为不可靠
• 避免在fixed元素内部写复杂嵌套，尤其别在里面放table或ul——结构一乱，fixed就失效
• 真机调试时打开visualViewport API观察高度变化，比单纯读window.innerHeight更准

结构紊乱的问题从来不在“遮不遮得住”，而在“浏览器到底把你的HTML当成了什么”。修CSS只是临时糊住裂缝，真正要动的是那一行漏掉的。