浮动元素无法直接使用z-index，必须配合position:relative/absolute/fixed/sticky才能生效；混用float与position时需注意层叠上下文限制及优先级关系。
浮动元素本身无法创建层叠上下文
直接给 float: left 或 float: right 的元素设置 z-index，这个值会被浏览器静默忽略——不是报错，而是根本不起作用。因为浮动是布局行为，不是定位模式，它不触发层叠上下文创建，也不响应 z-index。
常见错误是写成这样：.sidebar { float: left; z-index: 10; }
结果发现元素始终被其他内容盖住，调试半天也找不到原因。
真正起效的前提只有一个：先让元素成为「定位元素」。
必须配合 position 才能让 z-index 生效
只有当元素的 position 值为 relative、absolute、fixed 或 sticky 时，z-index 才开始参与层叠计算。而 float 和这些定位属性可以共存（仅限 relative），但要注意优先级关系：
-
position: absolute或fixed会完全忽略float，此时浮动失效，只按定位规则布局 -
position: relative与float可同时存在：浮动仍影响文档流，relative提供偏移锚点，z-index此时才真正可用 - 若父容器已创建层叠上下文（如设置了
opacity: 0.99或transform: translateY(0)），子元素的z-index只在该上下文中比较，无法越级覆盖外部元素
正确写法示例：.card { float: left; position: relative; z-index: 2; }
混用 float 和 position:relative 的实际层叠行为
这种组合看似“兼容”，但层叠顺序并不单纯由 z-index 决定，还要看是否处于同一层叠上下文：
- 如果两个浮动+相对定位的元素没有共同祖先层叠上下文，它们的
z-index会在根层叠上下文中直接比大小 - 如果它们的父容器设置了
opacity: 0.99，那它们就困在那个上下文里，即使z-index: 999也压不住外面z-index: 1的导航栏 - 多个同级浮动元素重叠（比如左浮撞右浮），最终谁在上仍取决于 HTML 顺序和
clear规则，z-index不介入
典型陷阱：
.nav { position: fixed; z-index: 100; }<br>.content { opacity: 0.99; }<br>.content .item { float: left; position: relative; z-index: 999; }
→ .item 永远盖不住 .nav，因为 .content 创建了新层叠上下文，999 只在内部有效
现代布局中应主动规避浮动用于层叠控制
浮动的设计初衷只是实现文字环绕图片，不是为复杂层叠或交互组件服务的。强行用它配合 position 和 z-index，容易陷入不可预测的渲染行为，尤其在响应式或嵌套场景下。
更可靠的做法是：
- 用
display: flex或display: grid替代浮动做整体布局 - 需要精确控制层级时，统一使用
position: relative+z-index，并显式管理层叠上下文（比如给关键区域加isolation: isolate） - 避免在同一个元素上同时写
float和position: absolute——后者会吃掉前者，但开发者可能意识不到
真正难处理的，从来不是 z-index 数值设多大，而是搞不清它在哪一层上下文中生效、跟谁比、为什么比不过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
