html规范禁止置于中，浏览器会静默修正为移至开头；z-index生效需同时满足position非static且未被意外创建的层叠上下文隔离。
为什么 <p></p> 不能放在
浏览器会直接把它从 里“揪出来”，塞进 开头，还可能在 DOM 树里生成一个匿名文本节点。这不是警告，是静默修正——你写的结构和最终解析出的结构根本不一样。
常见错误现象：
-
<p></p>出现在中，页面标题不显示、<meta charset="UTF-8">失效、中文乱码 - 开发者工具 Elements 面板里看到
下空空如也，但开头多了一个<p></p>
根本原因：HTML 规范明确定义 <p></p> 是流式内容元素，合法父元素只能是 、<section></section>、<article></article> 等块级容器， 不在其白名单内。
z-index 不生效的典型场景
写了 z-index: 999 却没用，大概率不是数值不够大，而是它压根没被浏览器“认领”。
必须同时满足两个条件：position 值不是 static（即设为 relative、absolute、fixed 或 sticky），且该元素没被包裹在意外创建层叠上下文的父容器里。
容易踩的坑：
- 父元素设置了
opacity: 0.99、transform: scale(1)或filter: blur(0)—— 这些都会触发新层叠上下文，子元素的z-index只在内部比大小，无法跨上下文盖过兄弟元素 - 误以为
z-index是全局排序器：不同层叠上下文里的元素，z-index数值再大也压不过父级层叠上下文本身的层级位置 - 用
position: relative却没设偏移，看起来像没动，但它已脱离文档流并参与层叠计算
如何判断是否意外创建了层叠上下文
打开浏览器开发者工具，选中疑似被“隔离”的元素，在 Styles 面板逐行检查是否有以下任一声明：
-
opacity值小于1 -
transform值不为none（哪怕只是transform: translateZ(0)） -
filter值不为none -
will-change包含transform、opacity等关键词 isolation: isolate
只要命中任意一条，这个元素就成为新的层叠上下文根节点，它内部所有 z-index 的比较范围就被锁死在这个局部环境里。
用 flex 或 grid 替代 absolute 定位来避免重叠
当多个元素需要精确排布又不想陷入 z-index 套娃时，优先考虑布局模型本身的能力。
实操建议：
- 父容器设
display: flex+flex-direction: column，子元素用margin-top: -16px实现视觉重叠，不触发新层叠上下文 - 用
grid-template-areas划分区域，把重叠部分定义为同一网格单元，再用z-index在局部控制顺序（此时风险可控） - 避免给多个兄弟元素同时设
position: absolute—— 它们默认共享同一个层叠上下文，但一旦某个父容器意外触发新上下文，层级关系就不可预测
真正难处理的不是怎么叠，而是怎么让叠得有迹可循：浏览器对结构错误静默修正，对层叠上下文创建又毫不声张，这两点最容易在上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
