z-index不起作用是因为浮动元素和绝对定位元素处于不同层叠上下文；解决方法是给它们的最近公共父容器设置position: relative，使其成为共同层叠上下文根节点。
浮动元素被绝对定位元素盖住，z-index 为什么不起作用
因为 float 元素和 position: absolute 元素默认处于不同层叠上下文（stacking context），直接设 z-index 不会跨上下文比较。浮动本身不创建新层叠上下文，但绝对定位元素一旦有 z-index 值（非 auto），就会创建自己的层叠上下文——它的子元素层级只在它内部生效。
- 浮动元素（如
float: left）属于文档流中的「常规流层叠上下文」，层级由 DOM 顺序和z-index（仅对定位元素有效）共同决定 -
position: absolute+z-index会创建独立层叠上下文，其内部所有子元素的层级都相对于它计算，不会和外部浮动元素横向比大小 - 如果父容器没设
position（如relative），浮动元素和绝对定位元素就分属两个平行的、无父子关系的层叠上下文，z-index数值再大也压不住对方
让浮动元素能被 z-index 控制的最小改动
关键不是给浮动元素加 z-index（它无效），而是让浮动元素和绝对定位元素进入同一个层叠上下文——最稳妥的做法是给它们的**最近公共父容器**设置 position: relative 且不设 z-index（或设为 0），这样它就成为层叠上下文根节点。
- 浮动元素本身无需加
position，保持float即可；它在这个新上下文中自然获得「层叠级别 0」 - 绝对定位元素需明确设
z-index，比如z-index: 1或z-index: -1，数值才真正起作用 - 避免给公共父容器设
z-index: auto或不设position，否则上下文不成立 - 示例：
.container { position: relative; } /* 必须这句 */<br>.floated { float: left; } /* 不用加 position */<br>.abs { position: absolute; z-index: 2; }
z-index 设负数时浮动元素突然消失？
不是消失了，是被父容器的背景或兄弟元素盖住了。当 z-index 为负值时，该元素会沉到其层叠上下文根节点的「背景和边框之下」，而浮动元素默认就在这个层级上。
- 如果公共父容器有
background-color，z-index: -1的绝对定位元素就会被盖在背景下面，看起来像消失 - 浮动元素没有
z-index，但它在层叠顺序中等价于z-index: 0（在父上下文中），所以一定高于z-index: -1 - 别用负
z-index去“压”浮动元素，想让它在下层，就改结构：把绝对定位元素移出浮动元素的父级，或用transform: translateZ(0)强制触发新层叠上下文隔离
现代替代方案：不用 float 和 absolute 硬刚
浮动本就不是为复杂层叠设计的，position: absolute 又脱离文档流，两者混用极易失控。真要控制遮挡关系，优先考虑 CSS Grid 或 Flexbox 布局。
立即学习“前端免费学习笔记（深入）”；
- 用
display: grid容器 +grid-area控制元素区域，天然支持层叠（z-index对 grid item 有效） - Flex 容器中，
order属性可调整视觉顺序，配合z-index更直观 - 若必须保留浮动（如老项目兼容），至少把绝对定位元素包裹进一个
position: relative的 wrapper，并控制 wrapper 的z-index，而不是直接调绝对定位元素
浮动和绝对定位的层叠问题，本质是层叠上下文边界没对齐。调 z-index 数值只是表象，找准并统一上下文根节点，才是实际动手时最不能跳过的一步。
