浮动元素通过float属性脱离普通文档流后，虽然不再占据父容器高度，但在视觉上仍会参与绘制。当它与position:fixed固定定位元素发生重叠时，浏览器需要依据层叠上下文和定位属性决定谁覆盖谁。很多开发者会下意识地给固定元素加上z-index，却发现有时生效有时不生效，甚至出现浮动卡片盖住固定导航的奇怪现象。要彻底解决这个问题，需要先搞清楚浮动与固定定位在层叠顺序中的真实关系，再根据具体场景调整z-index并清除浮动。

一、先理清浮动与固定定位的层叠顺序

浮动元素通过float属性脱离普通文档流，但它并没有完全脱离渲染树，文本和行内框会环绕它，块级盒子则忽略它的高度。固定定位元素通过position:fixed脱离文档流并相对于视口定位。当二者重叠时，浏览器需要比较它们在层叠上下文中的顺序。

按照CSS层叠规则，在没有z-index干预时，定位元素（position不为static且z-index为auto）绘制在浮动元素之上。表面上看固定元素应该始终遮住浮动元素，但实际页面中会出现反过来的情况。原因通常有三类：固定元素被限制在低层级的父级层叠上下文里；固定元素本身没有设置z-index，而浮动元素的某个祖先元素创建了高层级上下文；浮动元素使用了transform、opacity等属性，自身形成了新的层叠上下文，改变了比较基准。因此不能只盯着固定元素本身，还要检查它的祖先链。

二、调整z-index为何不生效：层叠上下文与定位限制

z-index只对定位元素有效。如果给一个static定位的元素设置z-index，属性会被忽略。同样，固定定位元素虽然属于定位，但如果它的父元素创建了层叠上下文，且该父元素本身的z-index低于浮动元素所在上下文，那么内部固定元素即使设置z-index:9999，也可能无法覆盖外部浮动元素，因为层叠上下文之间的比较优先于内部层级的绝对数值。

常见的层叠上下文创建条件包括：position为absolute或relative且z-index不为auto、opacity小于1、transform不为none、filter不为none、will-change指定了这些属性、contain:layout等。举例：当固定导航栏被放在一个带有transform动画的侧边栏容器内时，fixed定位会退化为相对该容器定位，并且他的层叠上下文被限制在容器内部。此时底部浮动的卡片如果拥有更高层级的上下文，就会盖住导航栏。解决方式是把固定元素移动到这些容器之外，或者提高父容器的z-index，并确保父容器参与正确的层叠比较。

下面代码演示了错误写法和修正思路：

<!-- 错误：固定头部放在带transform的容器内，z-index被限制 -->
<div class="sidebar">
  <header class="fixed-header">我是固定头部</header>
</div>
<div class="float-card">浮动卡片</div>

.sidebar {
  transform: translateX(0);
}
.fixed-header {
  position: fixed;
  top: 0;
  z-index: 9999; /* 在父级层叠上下文内部比较，无法覆盖外部高层级浮动卡片 */
}
.float-card {
  float: left;
  position: relative;
  z-index: 100; /* 若其父级或自身创建上下文且层级高，可能覆盖固定头部 */
}

修正时，把固定头部移到带transform的容器外，或给.sidebar也设置合理的z-index并创建上下文。更好的做法是尽量减少固定元素的祖先限制。

三、清除浮动避免布局塌陷加重遮挡

浮动元素不占据父容器高度，如果父容器内全是浮动子元素，高度会塌陷为0。此时固定元素可能会与后续内容或浮动区域重叠，看起来像遮挡。清除浮动不是直接改变层叠顺序，而是恢复父容器的高度，让固定元素和浮动区域在布局中尽量错开，降低视觉遮挡的发生概率。

清除浮动有几种主流方案。第一种是空元素法，在浮动元素后插入一个块级元素并设置clear:both，缺点是增加了无语义节点。第二种是伪元素clearfix，给父容器::after添加clear:both，同时需要兼容旧浏览器时补上zoom:1。第三种是overflow:hidden或overflow:auto，触发BFC来包裹浮动，但可能裁剪内容或出现滚动条。第四种是使用弹性盒或网格布局替代浮动，从根源上避免高度塌陷。

推荐使用clearfix工具类，代码简洁且不破坏语义：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  zoom: 1; /* 兼容旧版IE */
}

<div class="container clearfix">
  <div class="float-left">左侧浮动</div>
  <div class="float-right">右侧浮动</div>
</div>
<header class="fixed-header">固定头部</header>

使用clearfix后，container获得实际高度，固定头部与浮动容器之间的重叠关系会更容易通过z-index和定位控制。

四、综合实战：修复固定导航被浮动卡片遮挡

假设页面结构如下：顶部为fixed导航，下方主体包含一个浮动侧边栏和内容区。当滚动页面时，浮动侧边栏因为父容器没有清除浮动而高度塌陷，且侧边栏内部使用了transform，导致它盖住了固定导航。解决步骤分三步：首先把导航移到transform容器外部或取消不必要的transform；其次给导航设置position:fixed并赋予足够高的z-index；最后给主体容器加上clearfix，恢复高度。

修正后的完整示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .fixed-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background: #333;
      color: #fff;
      z-index: 1000;
    }
    .main {
      margin-top: 60px;
    }
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
    .sidebar {
      float: left;
      width: 200px;
      background: #f0f0f0;
      /* 不要在这里使用transform，否则会限制固定元素 */
    }
    .content {
      margin-left: 200px;
    }
  </style>
</head>
<body>
  <nav class="fixed-nav">固定导航</nav>
  <main class="main clearfix">
    <aside class="sidebar">浮动侧边栏</aside>
    <article class="content">内容区域</article>
  </main>
</body>
</html>

在这个示例中，固定导航独立在transform容器之外，z-index:1000高于普通浮动元素。侧边栏采用浮动布局，父容器用clearfix清除浮动，高度不再塌陷。即使内容较少，页面结构也能稳定显示，遮挡问题得以解决。

如果浮动卡片仍然覆盖固定元素，可以继续检查卡片本身是否创建了高层级叠上下文。通常将卡片的position设为static或降低其z-index，或者给固定导航增加z-index到更高值，并确保父级没有创建限制上下文，就能恢复正常的覆盖关系。