React中如何让组件正确显示在其他组件下方

问题根源 #

你当前给容器直接设置position: sticky做左下吸底效果时，容器自身只占正常文档流的位置，直接在同级追加新组件，新组件会按正常文档流排列，不会紧贴吸底状态下的原组件下方，导致布局错位。

推荐实现（无兼容问题） #

给原有吸底组件套一层外层包裹容器，将sticky定位属性转移到外层容器上，原组件和你要追加的下方组件都作为外层容器的子元素，垂直排列即可：

// 外层吸底包裹容器
const StickyWrap = styled.div`
  position: sticky;
  bottom: 40px;
  left: 40px;
  width: max-content;
  // 内部子元素垂直排布，gap值按需调整控制间距
  display: flex;
  flex-direction: column;
  gap: 16px;
`

// 原有组件容器，移除定位相关属性
const Container = styled.div`
  display: flex;
  width: max-content;
`

// 页面结构使用
return (
  <>
    {/* 页面其他常规内容 */}
    <StickyWrap>
      <Container>{/* 原有带子元素的组件内容 */}</Container>
      <div>{/* 你需要追加在下方的新组件 */}</div>
    </StickyWrap>
  </>
)

这个方案的逻辑是整个包裹盒统一执行吸底逻辑，始终固定在距视口底部40px、左侧40px的位置，内部子元素按正常flex垂直布局排列，自然会落在原有组件正下方，完全匹配预期效果。

备选方案（不推荐） #

如果不方便调整DOM结构新增包裹层，可以手动计算原有吸底组件的高度，给追加的新组件设置对应边距，让它刚好落在原组件下方。但这个方案适配性极差，原组件高度变化时必须同步修改边距值，维护成本高：

const NewComponent = styled.div`
  margin-left: 40px;
  // 边距值 = 吸底偏移40px + 原组件自身高度，按实际情况替换数值
  margin-bottom: calc(40px + 120px);
`

注意事项 #

• sticky定位生效的前提是父元素高度大于sticky元素自身高度，且父元素不能设置overflow: hidden/auto/scroll属性，否则吸底效果会失效
• 两个组件的间距直接通过外层包裹盒的gap或者子元素的margin调整即可，不要修改sticky的bottom/left偏移值，避免破坏定位位置

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