定位元素通过设置position和z-index可控制层叠顺序，默认定位元素在浮动元素之上，但需注意层叠上下文影响；合理使用z-index并避免混合float与absolute，推荐采用flex或grid布局以减少复杂性。
当CSS浮动元素与定位元素发生叠加时，显示顺序可能不符合预期。这是因为浮动和定位遵循不同的层叠机制。要解决这个问题，关键是合理使用 position 属性和 z-index 来控制元素的堆叠顺序。
理解浮动与定位的层叠关系
浮动元素（float: left/right）会脱离文档流，但仍在普通流中占据一定位置。而定位元素（如 position: relative/absolute/fixed）可以通过 z-index 显式控制层级。默认情况下，定位元素会层叠在浮动元素之上，但这不是绝对的，取决于它们的层叠上下文。
使用 z-index 控制显示优先级
给需要显示在上方的定位元素设置 position 和 z-index：
- 确保该元素的 position 不是 static（可设为 relative、absolute 等）
- 设置一个较高的 z-index 值，例如 z-index: 10
- 必要时为底层浮动元素设置较低的 z-index（如 z-index: 1）以明确层级
避免层叠冲突的实用建议
有时即使设置了 z-index 也不生效，常见原因包括：
立即学习“前端免费学习笔记（深入）”；
- 父元素创建了新的层叠上下文，限制了子元素的 z-index 效果
- 多个定位元素未设置 position，导致 z-index 不起作用
- 浮动元素和定位元素嵌套混乱，建议尽量避免混合使用 float 和 absolute
推荐：在现代布局中，用 flex 或 grid 替代 float 布局，减少浮动带来的复杂性。
基本上就这些。关键点是：定位元素加 position 和 z-index，理清层叠上下文，就能稳定控制谁在上谁在下。不复杂但容易忽略细节。
