浮动父容器必须设 position: relative 和 z-index 才能创建层叠上下文，使子元素的 z-index 生效；z-index 为负值会使子元素沉至父背景之下；dom 顺序决定初始堆叠层级；现代布局应优先用 flex/grid 替代 float。
浮动父容器必须设 position: relative 和 z-index
绝对定位子元素被盖住，不是因为 z-index 没写够大，而是它压根没进入可比的层叠上下文。浮动本身不创建新层叠上下文，所以即使子元素写了 position: absolute; z-index: 999，它的层级也只在“空气里”生效——没有父级锚定，浏览器不认。
必须给浮动元素自身加 position: relative（哪怕只是占位）和一个明确的 z-index（0 就够），这样它才成为独立层叠上下文的根节点，子元素的 z-index 才真正落地。
- 错误写法：
.sidebar { float: left; }→ 子元素z-index被忽略 - 正确写法：
.sidebar { float: left; position: relative; z-index: 0; } - 子元素再设
z-index: 10就能稳定浮起，不用硬堆到 9999
z-index 为负值时绝对定位子项会“消失”
这不是 bug，是规范行为：z-index: -1 的元素会沉到其层叠上下文根节点的背景和边框之下，而浮动元素默认就在这个层级上，自然把它盖住。
常见现象：气泡提示突然看不见了，检查 computed styles 却发现它还在 DOM 里、坐标也对——其实是被父容器的背景色吞掉了。
- 别用
z-index: -1去“压”浮动元素，它只会让子项退到背景层 - 想让子项退后，改结构：把绝对定位元素移出浮动父容器，或用
transform: translateZ(0)强制隔离上下文 - 如果必须共存，确保浮动父容器有显式背景色（比如
background: #fff），否则z-index: -1可能直接透出 body 背景
DOM 顺序不能靠 z-index 强行逆转
即使层叠上下文建好了，HTML 中的书写顺序仍决定初始堆叠层级。浏览器按 DOM 顺序渲染，同上下文内，后写的元素默认压在先写的上面——这条规则对浮动和绝对定位都适用。
常见翻车点：把 <div class="float-wrapper"><div class="absolute-child"></div></div> 放在另一个浮动块之后，结果还是被盖住。
- 确保浮动容器（及其内部绝对定位子项）在 HTML 中位于可能遮挡它的其他浮动/定位元素之前
- 避免用 JS 动态插入打乱原始 DOM 顺序，否则层叠行为不可控
- 不要依赖
z-index去“纠正” DOM 顺序带来的天然层级，维护成本高且易失效
现代布局下优先考虑放弃 float
浮动本就不是为复杂层叠设计的，position: absolute 又脱离文档流，两者混用极易失控。尤其当项目需要响应式、动画或无障碍支持时，这种组合会持续暴露兼容性问题。
真正省心的做法是换掉浮动：用 display: flex 或 display: grid 实现侧边栏、卡片排列等场景，绝对定位子项（如 tooltip、popover）直接挂载在逻辑父容器上，不再受浮动干扰。
- Flex/Grid 中
float会退化为 inline-level 行为，clear失效，z-index竞争也更可预测 - 旧项目迁移时，可先局部替换，比如把
.sidebar改成display: flex+flex-direction: column - 邮件模板等兼容场景除外——那里
float仍是事实标准，得老老实实配position: relative和z-index
position: relative 这一步——它看起来像装饰，却是让 z-index 生效的开关。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
