浮动元素默认不参与z-index层叠计算，需添加position（如relative）才能使z-index生效；现代布局应优先使用flexbox或grid替代float。
浮动元素默认不参与 z-index 的层叠上下文（stacking context）计算，所以直接给浮动元素设置 z-index 通常无效——除非它同时成为定位元素（即 position 值为 relative、absolute、fixed 或 sticky）。
浮动（float: left/right）只是改变文档流中的排列方式，它不会触发新的层叠上下文，也不受 z-index 控制。浏览器会按“文档流顺序 + 浮动规则”来决定谁在上、谁在下，此时 z-index 完全不起作用。
z-index: 999，只要没加 position，该样式会被忽略z-index 精确控制遮盖关系要使 z-index 生效，必须让元素成为“定位元素”。对浮动元素来说，只需额外添加 position: relative（最常用且不影响布局），即可激活 z-index。
position: relative + float 是合法组合，元素仍保持浮动行为，同时获得层叠控制权z-index 值只在同一个层叠上下文中比较，父级若设了 z-index（且 position 有效），会限制子元素的层叠范围positio
n: absolute 替代 
n: absolutefloat，否则会脱离文档流，可能破坏原有布局逻辑页面的最终显示层级不是靠单个 z-index 决定的，而是由嵌套的层叠上下文逐级计算得出。浮动元素只有在其最近的定位祖先（或根元素）形成的上下文中，才能与其他同级定位元素比 z-index。
position 元素（非 static）+ z-index 不为 auto，就可能创建新层叠上下文opacity 、transform、filter 等属性也会隐式创建层叠上下文，影响内部元素的 z-index 表现浮动本用于图文环绕等传统排版，而 z-index 多用于模态框、下拉菜单等交互组件。两者混合易引发不可预期的遮盖问题，尤其在响应式或动态插入内容时。
flexbox 或 grid 替代 float 实现布局，它们天然支持 z-index（子项设 position 后即可生效）position: absolute/relative + z-index，明确建立层叠上下文z-index 被截断