React模态框背景设100%高度后覆盖内部组件求助

问题根源 #

你遇到的问题是因为modalBackground设置height:100%后，缺少合适的布局规则定位内部commentsContainer，导致白色容器未被正确展示在背景之上（视觉上呈现被背景覆盖的效果）。

修复方案 #

修改Styled Components代码，调整布局逻辑并优化定位规则：

import styled from 'styled-components'

export const CommentsModalStyled = styled.div`
  /* 确保内部绝对定位元素以当前组件为参考容器 */
  position: relative;
  width: 100%;
  min-height: 100vh;

  .modalBackground {
    background-color: #00000038;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    /* 用100vh直接覆盖整个视口高度，避免父容器高度不确定的问题 */
    height: 100vh;
    /* 通过弹性布局让评论容器自动垂直水平居中 */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .commentsContainer {
    background-color: white;
    width: 50%;
    height: 60%;
    /* 移除margin:auto，改用flex布局实现居中 */
    overflow-y: auto; /* 评论过多时允许垂直滚动 */
    padding: 1rem; /* 添加内边距优化内容显示 */
  }

  .commentsSection {
    display: flex;
    justify-content: flex-start; /* 调整为左对齐，更符合评论布局逻辑 */
    flex-direction: row;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .commentsSection--image > img{
    width: 50px;
    height: 51px;
    border-radius: 50%; /* 可选：将头像设为圆形提升视觉效果 */
  }

  .commentsSection--content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .commentsSection--content span:last-child {
    font-size: 0.8rem;
    color: #666; /* 给时间戳设置灰色，区分评论内容 */
  }
`

关键修改说明 #

1. 父容器相对定位：给CommentsModalStyled添加position: relative，保证内部绝对定位的modalBackground以组件容器为参考，而非整个文档。
2. 视口高度替代百分比：将modalBackground的height:100%改为height:100vh，确保背景始终覆盖整个浏览器视口，不受父容器高度影响。
3. 弹性布局居中：通过display:flex配合align-items和justify-content，让commentsContainer自动居中，同时子元素会自然显示在背景层之上，彻底解决"覆盖"问题。
4. 体验优化：添加滚动、内边距、间距和样式调整，提升评论区的视觉体验和实用性。

组件代码（无需修改） #

import { CommentsModalStyled } from "../../../styles/commentsModal";

interface CommentsInterface {
    comments: any[];
}

export const CommentsModal = ({ comments }: CommentsInterface) => {
    return (
        <CommentsModalStyled>
            <div className="modalBackground">
                <div className="commentsContainer">
                    {comments.length !== 0 ? (
                        comments.map((e: any, index: number) => (
                            <div className="commentsSection" key={index}>
                                <div className="commentsSection--image">
                                    <img src={e.user.perfil} alt="userphoto" />
                                </div>
                                <div className="commentsSection--content">
                                    <span>{e.text}</span>
                                    <span>{e.created_at}</span>
                                </div>
                            </div>
                        ))
                    ) : null}
                </div>
            </div>
        </CommentsModalStyled>
    );
};

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