如何实现元素水平相对中间列居中、垂直固定屏幕的定位效果

需求说明 #

页面横向排列3个宽度不固定的Material UI列组件，需要将文本为Create Item的Button组件满足以下定位要求：

• 垂直方向固定在屏幕底部位置，不随页面滚动偏移
• 水平方向始终相对于中间主列居中对齐
• 中间列内容长度不固定：内容较短时可完全展示在屏幕内，内容超出屏幕高度时支持滚动浏览

已尝试方案的问题 #

• 用fixed定位放置按钮：按钮相对整个屏幕水平居中，无法对齐中间列的水平中心
• 用relative定位搭配textAlign: 'center'把按钮放在中间列内容底部：按钮垂直位置随内容长度变化，中间列内容过长时按钮会被挤出可视区域
• 把按钮放在中间列顶部，搭配textAlign: 'center', transform: 'translateY(85vh)'实现效果：仅页面初始加载时位置正常，向下滚动页面时按钮会随之上移

问题最小复现代码 #

<Grid container>
  <Grid xs={2}>
    <Box style={{ textAlign: 'center' }}>
      <div>Left Column for Navigation</div>
      <div>Nav 1</div>
      <div>Nav 2</div>
    </Box>
  </Grid>

  <Grid xs={6}>
    <Grid
      style={{
        zIndex: 9001,
        position: 'relative',
        textAlign: 'center',
        maxHeight: 0,
        transform: 'translateY(85vh)',
      }}
    >
      <Button>Create Item</Button>
    </Grid>
    <Box style={{ textAlign: 'center' }}>
      <Grid>Main Column</Grid>
      <Grid>Many Items,</Grid>
      <Grid>it might even</Grid>
      <Grid>require scrolling</Grid>
    </Box>
  </Grid>
  <Grid style={{ textAlign: 'center' }} xs={4}>
    <div>Right Column For Context-Related Stuff</div>
    <Grid>Context Entry 1</Grid>
    <Grid>Context Entry 2</Grid>
    <Grid>Context Entry 3</Grid>
  </Grid>
</Grid>

上述代码的问题：主列内容过多触发滚动时，Create Item按钮会随页面滚动移出可视区域，不符合始终悬浮在固定Y轴位置、水平对齐中间主列中心的预期。

实现方案 #

核心利用position: sticky的定位特性，不需要JS计算宽度，纯CSS即可实现效果：

1. 给中间主列的Grid容器添加position: relative，作为按钮的定位父级，约束按钮的水平活动范围
2. 将按钮容器作为中间列的直接子元素，和内容区平级，设置以下样式：
   • position: sticky：开启粘性定位，滚动时自动保持在视口指定位置
   • bottom: 24px：设置按钮距离屏幕底部的距离，数值可按需调整
   • width: 100%：继承中间列的宽度，保证对齐基准和中间列一致
   • textAlign: 'center'：让按钮在容器内水平居中
   • zIndex: 9001：保证按钮悬浮在所有内容上层，不会被滚动内容遮挡
3. 不需要给按钮容器加transform偏移、固定高度这类属性，避免干扰sticky的定位逻辑。
   修改后的核心代码：

<Grid container>
  <Grid xs={2}>
    <Box style={{ textAlign: 'center' }}>
      <div>Left Column for Navigation</div>
      <div>Nav 1</div>
      <div>Nav 2</div>
    </Box>
  </Grid>

  {/* 中间列加relative作为定位上下文 */}
  <Grid xs={6} style={{ position: 'relative' }}>
    {/* 悬浮按钮容器 */}
    <Box
      style={{
        position: 'sticky',
        bottom: '24px',
        width: '100%',
        textAlign: 'center',
        zIndex: 9001,
        paddingBottom: '16px'
      }}
    >
      <Button variant="contained">Create Item</Button>
    </Box>
    {/* 中间列原有内容，任意长度都不影响按钮定位 */}
    <Box style={{ textAlign: 'center' }}>
      <Grid>Main Column</Grid>
      <Grid>Many Items,</Grid>
      <Grid>it might even</Grid>
      <Grid>require scrolling</Grid>
    </Box>
  </Grid>
  <Grid style={{ textAlign: 'center' }} xs={4}>
    <div>Right Column For Context-Related Stuff</div>
    <Grid>Context Entry 1</Grid>
    <Grid>Context Entry 2</Grid>
    <Grid>Context Entry 3</Grid>
  </Grid>
</Grid>

该方案自适应列宽变化：不管左侧、右侧列宽度如何调整，按钮始终以中间列的宽度为基准居中，垂直位置始终固定在屏幕指定高度，滚动时不会偏移。

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