浮动元素不响应z-index，因其非定位元素；需配合position: relative等才能使z-index生效，否则z-index被忽略。
浮动元素本身不响应z-index
直接给 float: left 或 float: right 的元素写 z-index，浏览器会静默忽略——哪怕你写了 z-index: 999，它也完全不生效。
根本原因不是浏览器 bug，而是规范行为：z-index 只对「定位元素」有效，即 position 值必须是 relative、absolute、fixed 或 sticky；而 float 是一种布局行为，不属于定位模式，也不创建层叠上下文。
- 浮动元素仍属于普通文档流（只是视觉偏移），它的层叠顺序由 HTML 顺序、清除规则和浮动方向决定，和
z-index无关 - 常见误操作：在 DevTools 里看到元素有
z-index: 10，但 computed 样式里position显示为static→ 说明该z-index已被丢弃 - 检查方法：选中元素 → Styles 面板搜
position，确认最终值不是static
混用 float 和 position: relative 才能让 z-index 生效
想让浮动元素受 z-index 控制，唯一可靠方式是加 position: relative（或其他非 static 值），此时起效的是定位属性，不是浮动本身。
注意：position: relative 不影响浮动流，只提供一个“锚点”，让 z-index 有了作用前提。
- 正确写法：
.box { float: left; position: relative; z-index: 10; } - 错误写法：
.box { float: left; z-index: 10; }→z-index被忽略 - 如果同时设了
float和position: absolute，float会被完全无视——绝对定位已脱离文档流，浮动失去意义
浮动与绝对定位元素互相遮挡时，z-index 失效的真正原因
当浮动元素被 position: absolute 元素盖住，或反过来，问题往往不是 z-index 设小了，而是它们分属不同层叠上下文（stacking context）。
浮动元素默认在「常规流层叠上下文」里，而带 z-index 的绝对定位元素会创建自己的独立层叠上下文——两者没有父子关系，数值再大也无法跨上下文比较。
- 解决方案：给它们的**最近公共父容器**加
position: relative（不设z-index或设为0），让它成为共同层叠上下文根节点 - 浮动子元素保持
float即可，无需额外position；绝对定位子元素则需明确设z-index - 避免给公共父容器加
opacity: 0.99、transform: translateZ(0)等触发新上下文的属性，否则又会把子元素锁进新层级
现代布局中应主动规避 float + z-index 组合
浮动本就不是为复杂层叠设计的，它的原始用途只是实现文字环绕图片。强行用它配合 z-index 控制层级，本质是在对抗 CSS 渲染模型。
一旦结构稍复杂（比如多层嵌套、动态插入、响应式切换），层叠行为就会变得不可预测，且调试成本陡增。
- 替代方案优先级：用
display: flex或display: grid实现布局，需要堆叠控制时统一用position: relative+z-index - 如果必须保留浮动（如兼容老项目），请严格遵循「浮动元素必须配
position: relative才能参与 z-index 比较」这一规则 - 最容易被忽略的一点：父级无意中加了
filter、will-change或isolation: isolate，会悄悄创建新层叠上下文，让所有子级z-index失去对外竞争力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
