购物车模态框商品过多时顶部内容被遮挡，求样式修复方案

问题描述 #

开发购物车模态框时，添加多个商品后，首个商品无法显示，样式出现异常。实际有4个商品，但仅显示3个。

代码实现 #

JSX代码 #

<div onClick={this.props.onClick} className={modalStyles.darkBg}/>
<div className={modalStyles.centered}>
  <div className={modalStyles.modal}>
    <p className={modalStyles.heading}>
      My bags, {this.props.cart.length} items
    </p>
    {this.props.cart.map((item, index) => (
      <div className={modalStyles.modalBody} key={item.id}>
        <div className={modalStyles.row1}>
          <div className={modalStyles.row2Child}>
            <button type="button" onClick={()=> {this.props.addToCartWithQty(item)}}>+</button>
            <p>{item.qty}</p>
            <button type="button" onClick={()=> {this.props.removeFromCart(index)}}>-</button>
          </div>
          <img src={item.gallery[0]} alt="Avatar"/>
        </div>
      </div>
    ))}
  </div>
</div>

样式代码 #

.darkBg {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100vw;
  height: 100vh;
  z-index: 10;
  top: 0;
  left: 0;
}

.centered {
  position: absolute;
  top: 35%;
  right: 0;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.modal {
  width: 350px;
  height: auto;
  background: white;
  color: white;
  z-index: 10;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
}
  
.heading {
  margin: 0;
  padding: 10px;
  color: #2c3e50;
  font-weight: 500;
  font-size: 18px;
  text-align: left;
}

.modalBody {
  display: flex;
  flex-direction: column;
  padding: 10px;
  font-size: 14px;
  color: #2c3e50;
  gap: 10px;
}

异常截图 #

问题分析与解决方法 #

核心原因 #

.centered 的定位逻辑存在缺陷：

• 使用 position: absolute + top: 35% + transform: translate(-50%, -50%)，当商品数量增加导致模态框高度超过视口35%的高度时，模态框顶部会超出视口上方区域，直接遮挡首个商品；
• right: 0 配合 translate(-50%, -50%) 的水平偏移逻辑，在垂直方向无法自适应内容高度变化。

修复方案 #

修改 .centered 和 .modal 的样式，确保模态框不会溢出视口：

.centered {
  position: fixed;
  top: 50%;
  right: 20px; /* 右侧留间距提升体验 */
  transform: translateY(-50%); /* 仅垂直居中，水平固定靠右 */
  z-index: 10;
}

.modal {
  width: 350px;
  max-height: 90vh; /* 限制最大高度，避免超出视口 */
  height: auto;
  background: white;
  color: white;
  z-index: 10;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
  overflow-y: auto; /* 内容过多时显示滚动条 */
}

额外检查 #

• 确认 item.id 唯一，避免因重复key导致的渲染异常；
• 若 .row1、.row2Child 有自定义样式，需检查是否存在溢出或遮挡问题。

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