如何让设置position:fixed的div元素实现并排对齐布局

核心问题原因 #

之前遇到元素重叠、定位不符合预期的核心原因是定位属性加错了层级：

• 给每个子元素单独设置position:fixed时，所有元素都会脱离普通文档流，默认相对于视口原点定位，自然会堆叠在一起，此时再加float:left或者display:inline-block都不会生效，因为浮动和行内块的排列逻辑只对普通文档流内的元素有效。
• 在内层元素上用position:absolute会相对于最近的已定位祖先元素偏移，position:sticky会受最近的滚动容器影响，两者都无法稳定固定在视口指定位置，滚动页面时会出现移位。

正确实现逻辑 #

只需要把position:fixed属性挂载到最外层包裹所有并排元素的容器上，把这个容器整体固定在视口的目标位置，容器内部的所有元素完全按照普通文档流规则布局即可，不需要给任何内层元素加定位属性。
这种实现方式下：

• 外层容器整体固定在视口，页面滚动时不会移位
• 内部子元素可以用flex、浮动、行内块任意方式实现横向并排
• 任意子元素设置display:none时，剩余元素会自动重排填补空位，完全匹配需要的效果
• 不需要改动现有的DOM嵌套结构

完整代码示例 #

<style>
/* 最外层容器加fixed定位，整体固定在视口位置 */
.wrapper {
  position: fixed;
  /* 以下两个值按需调整，控制固定区块在视口的位置 */
  top: 20px;
  left: 20px;
  /* 用flex实现内部元素横向并排，也可以换成float/inline-block方案 */
  display: flex;
  gap: 10px; /* 控制元素之间的间距 */
}

/* 内层元素不需要加任何定位属性，正常写样式即可 */
.child-1, .child-2, .child-3 {
  width: 80px;
  height: 80px;
  background: #2563eb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 6px;
}

/* 给需要隐藏的元素加这个类，即可测试自动补位效果 */
.is-hidden {
  display: none;
}
</style>

<!-- 原有DOM结构完全不需要修改 -->
<div class="wrapper">
  <div class="parent-1">
    <div class="child-1">1</div>
  </div>
  <div class="parent-2">
    <div class="child-2">2</div>
  </div>
  <div class="parent-3">
    <div class="child-3">3</div>
  </div>
</div>

如果不需要兼容极老旧浏览器，优先用flex布局做横向排列，代码更简洁，对齐和间距控制比浮动、行内块方案更方便，不会出现外边距重叠、间隙异常之类的兼容问题。

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