如何在图片左右边缘上方定位左右切换按钮？

调整布局结构 #

先优化组件的DOM层级，让按钮和图片处于可定位的关联结构中，这里提供两种可行的布局方式：

方案一：绝对定位式布局（推荐，精准贴合图片边缘）

<div className={styles.container}>
  <img 
    src={`${item.path}${transformation}/${item.name}`} 
    alt={item.name} 
    className={styles.fullImage} 
  />
  <div className={styles.buttonContainer}>
    <Button 
      type={ButtonType.Circular} 
      text='<' 
      onClick={() => {}} 
      className={styles.navButton} 
    />
    <Button 
      type={ButtonType.Circular} 
      text='>' 
      onClick={() => {}} 
      className={styles.navButton} 
    />
  </div>
</div>

对应的CSS（CSS Modules）：

/* 全屏模态框容器，保持原有居中逻辑 */
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
}

/* 图片样式：自适应容器，避免超出屏幕 */
.fullImage {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  /* 为按钮容器提供定位基准 */
  position: relative;
}

/* 按钮容器：完全覆盖图片区域，实现精准定位 */
.buttonContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 90vw;
  height: 100%;
  max-height: 90vh;
  /* 水平分布按钮，垂直居中 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 容器不拦截点击，保证图片可交互（比如右键保存） */
  pointer-events: none;
}

/* 按钮样式：恢复点击能力，添加视觉优化 */
.navButton {
  pointer-events: auto;
  margin: 0 16px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  flex-shrink: 0;
}

方案二：Flex嵌套布局（无需绝对定位）

如果更倾向于纯Flex布局，也可以用这种方式：

<div className={styles.container}>
  <div className={styles.imageWrapper}>
    <Button 
      type={ButtonType.Circular} 
      text='<' 
      onClick={() => {}} 
      className={styles.navButton} 
    />
    <img 
      src={`${item.path}${transformation}/${item.name}`} 
      alt={item.name} 
      className={styles.fullImage} 
    />
    <Button 
      type={ButtonType.Circular} 
      text='>' 
      onClick={() => {}} 
      className={styles.navButton} 
    />
  </div>
</div>

对应的CSS：

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
}

.imageWrapper {
  display: flex;
  align-items: center;
  max-width: 90vw;
  max-height: 90vh;
}

.fullImage {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

.navButton {
  margin: 0 16px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  /* 固定按钮尺寸，避免被Flex挤压 */
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

核心逻辑说明 #

• 垂直居中：两种方案都通过align-items: center保证按钮与图片垂直对齐
• 边缘贴合：方案一用justify-content: space-between让按钮分别贴紧容器左右；方案二通过Flex并列布局，按钮自然分布在图片两侧
• 交互兼容：方案一通过pointer-events的开关，确保容器不影响图片的原生交互；方案二的按钮与图片并列，不存在遮挡问题
• 响应式适配：通过max-width和max-height限制图片及容器尺寸，适配不同屏幕大小

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