浮动元素被fixed遮挡的根本原因是二者不在同一层叠上下文，fixed脱离文档流直接浮于视口，而浮动仍在正常流中布局；解决方式应是给body设padding-top让整体内容让出空间，而非对浮动元素加margin-top。
浮动元素被 position: fixed 元素遮挡，不是 z-index 没设对，而是它根本“没地方躲”——浮动元素还在文档流里挤位置，fixed 元素却直接浮在视口上层，两者压根不在一个空间维度里打架。
为什么给浮动元素加 margin-top 常常无效
因为 margin-top 是让元素在**正常流中下移**，但 fixed 元素脱离文档流后，后续内容（包括浮动块）仍从视口顶部开始渲染，此时加 margin-top 只是把浮动块自己往下推了一段，而 fixed 元素纹丝不动，视觉上还是重叠。更糟的是：如果父容器没清除浮动、高度塌陷，margin-top 甚至可能“悬空”不生效。
- 浮动元素的
margin-top不影响其相对于 fixed 元素的层叠位置，只影响它在普通流中的起始坐标 - 若浮动父容器未触发 BFC（如没设
overflow: hidden），它的高度为 0，子元素的margin就失去参照基准 - 浏览器开发者工具里能看到：浮动元素的盒模型位置确实下移了，但 fixed 导航栏仍在原位盖着它
真正该动的是 body 或主容器的 padding-top
fixed 导航栏高度固定时，最稳的方式是让整个页面内容「主动让出空间」，而不是让某个浮动块单独躲。
- 给
body加padding-top: 60px（假设导航栏高 60px），所有后续内容（含浮动元素）都会从第 60px 开始布局，自然避开遮挡 - 不要用
margin-top替代 —— 某些浏览器下会引发滚动条偏移或触发强制重排 - 如果导航栏高度响应式变化（比如小屏变矮、大屏变高），需配合 JS 动态更新
body的padding-top值，或改用position: sticky替代fixed
浮动元素自身要不要加 margin？看场景
加 margin 不是为了躲 fixed 元素，而是控制它和兄弟浮动项之间的间距，或者防止文字环绕时贴得太紧。
- 水平间距（如左右浮动卡片）：用
margin-right或margin-left安全有效，推荐.item:not(:last-child) { margin-right: 12px; } - 垂直方向慎用
margin-top/bottom：浮动元素之间不参与外边距合并，但浏览器可能忽略其效果；想控制上下留白，优先用padding或给父容器设min-height - 如果浮动项有背景或边框，记得提前设
box-sizing: border-box，否则width + padding + border容易撑破容器
当 fixed 和 float 必须共存时，z-index 很容易失效
不是你没写 z-index，而是其中一个元素的祖先触发了新的层叠上下文（例如设置了 transform、opacity、will-change 或 filter），导致子元素的 z-index 只在该上下文内生效。
- 检查 fixed 元素是否套在某个带
transform: translateZ(0)的 wrapper 里 —— 这会创建隔离的层叠环境 - 确保两个元素的定位都已启用：
position值不能是static，否则z-index无意义 - 真要靠层级硬控，把 fixed 元素的
z-index设到 999+，同时确认它的父容器没有意外创建新层叠上下文
浮动和 fixed 同时出现时，最容易被忽略的其实是清除浮动本身——只要父容器高度塌陷，再调 margin 或 z-index 都是隔靴搔痒。先让结构稳住，再谈避让和分层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
