Position absolute导致搜索结果互相重叠 该如何调整布局？

问题根源 #

你给每一个单独的搜索结果项都设置了position: absolute，所有绝对定位元素默认基于父级定位上下文堆叠在同一位置，自然会出现重叠，也无法按正常文档流上下排列。

解决步骤 #

1. 调整JSX结构，新增搜索结果外层容器 #

把所有搜索结果项包裹在同一个外层容器内，不要给单个结果项加绝对定位：

// 新增外层容器
<div className="search-result-container">
{
  list.map((val, key) => {
    return (
      <div className="search-result" key={key}>
        <Row>
          <Col md="auto">
            <img
              onClick={() => clickProductDetail(val)}
              src={val.images[0].src}
              alt={val.images[0].alt}
              width="18"
              height="18"
            />
          </Col>
          <Col md="10">
            <div className="product-card-title">
              {val.title}
            </div>
            <div className="product-card-price">
              ${val.price}
            </div>
          </Col>
        </Row>
      </div>
    )
  })
}
</div>

2. 调整CSS样式 #

/* 搜索栏组件的最外层父容器需要加相对定位，作为结果容器的定位上下文 */
.search-bar-wrapper {
  position: relative;
}

/* 外层结果容器加绝对定位，悬浮在其他元素上方 */
.search-result-container {
  position: absolute;
  z-index: 9000;
  width: 100%; /* 和搜索栏宽度保持一致，可按需调整 */
  /* 可选配置：搜索结果过多时展示滚动条，避免遮挡过多页面内容 */
  max-height: 400px;
  overflow-y: auto;
  background: #fff; /* 加白色背景避免透显下方内容 */
}

/* 单个搜索结果项取消绝对定位，用正常文档流排列 */
.search-result {
  position: relative;
  /* 按需加内边距、分隔线等样式 */
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
}

修改后单个搜索结果会在外层容器内自然上下排列，外层容器悬浮在下方灰色区域上方，不会推开其他页面元素，也不会出现重叠问题。

内容的提问来源于stack exchange，提问作者ghifari.akbar