如何在HTML中实现两个独立div固定定位且不重叠

当多个元素设置position:fixed后出现重叠，核心原因是堆叠层级或定位位置冲突，以下是直接可行的解决方法：

1. 调整堆叠层级（z-index） #

默认情况下，DOM结构中靠后的固定定位元素会覆盖前面的。给需要显示在上方的元素设置更高的z-index值即可：

<div class="top">Div 1</div>
<div class="menu">Menu div</div>

.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background: #eee;
  z-index: 100; /* 数值高于menu的z-index，就会显示在上方 */
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background: #ccc;
  z-index: 90;
}

2. 设置错位的定位位置 #

如果需要两个固定元素垂直排列不重叠，给下方的元素设置top值等于上方元素的高度（或加上间距）：

.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 1rem;
  background: #eee;
}

.menu {
  position: fixed;
  top: 50px; /* 与top元素的高度一致，刚好衔接不重叠 */
  left: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 0 1rem;
  background: #ccc;
}

实际开发中通常会结合两种方法：用z-index确保层级正确，用top/bottom等属性控制位置避免重叠。

内容的提问来源于stack exchange，提问作者Nisha