如何解决CSS/JSX中屏幕缩小时图片与文本重叠的问题？

开发个人作品集网站时，大显示器上布局正常，但缩小至Macbook Pro这类笔记本尺寸时，.text-zone与.profile-img出现重叠。预期效果：屏幕足够大时两者并排，屏幕较小时图片自动移至文本上方/下方。

原代码 #

JSX代码 #

const Home = () => {
   return (
       <div className="container home-page">
           <div className="text-zone">
               <h1>My Name</h1>
               <h2>Intern at xxx  | Greater xxx Area</h2>
               <Link to="/about" className="flat-button">Learn More</Link>
           </div>
           <div class="profile-img">
             <img src={Headshot} alt="Headshot"/>
           </div>
       </div>
   ) 
}

SCSS代码 #

.home-page {
  .text-zone {
    position: absolute;
    left: 30%;
    top: 50%;
    transform: translateY(-50%);
    width: 40%;
    max-height: 90%;
  }

    h1 {
        color: white;
        font-size: 80px;
        margin: 0;
        font-family: 'Roboto Mono';
        font-weight: 400;
        animation: fadeIn 1s 1.7s backwards;
    }

    .profile-img {
      position: absolute;
      top: 30%;
      right: 20%;
      z-index: -1;
      box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);


      &:hover {
          outline:2px solid darkgoldenrod;
          outline-offset: 2rem;
          transition: all .2s;
          border-radius: 2px;
          object-fit: cover;
      }
     
    }
}

h2 {
  font-family: 'Roboto Mono';
  color: #8d8d8d;
  animation: fadeIn 1s 1.8s backwards ;
}

.flat-button {
  background-color: white;
  color: black;
  font-size: 1.6rem;
  border-radius: 6rem;
  text-decoration: none;
  padding: 1.5rem 4rem;
  display: inline-block;
  margin-top: 10px;
  animation: fadeIn 1s 1.8s backwards;
  letter-spacing: 2px;
  
  &:hover {
    background-color: #8d8d8d;
    outline:2px solid darkgoldenrod;
    color: white;
  }
}

解决方案 #

1. 替换绝对定位为Flexbox布局 #

绝对定位使元素脱离文档流，是重叠的核心原因。改用Flexbox实现元素自动排列，同时保留垂直居中效果：

.home-page {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
  padding: 2rem;
  box-sizing: border-box;

  .text-zone {
    width: 40%;
    /* 移除原position、left、top、transform属性 */
  }

  .profile-img {
    z-index: 1;
    box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);
    /* 移除原position、top、right属性 */

    &:hover {
      outline:2px solid darkgoldenrod;
      outline-offset: 2rem;
      transition: all .2s;
      border-radius: 2px;
    }

    img {
      object-fit: cover;
      max-width: 100%;
      height: auto;
    }
  }
}

2. 添加响应式断点 #

通过媒体查询，在屏幕宽度小于1280px（Macbook Pro标准宽度）时，切换为垂直排列：

@media (max-width: 1280px) {
  .home-page {
    flex-direction: column;
    text-align: center;

    .text-zone {
      width: 80%;
      margin-bottom: 3rem;
    }
  }
}

3. 修正JSX语法错误 #

React中需用className替代class，否则样式无法生效：

const Home = () => {
   return (
       <div className="container home-page">
           <div className="text-zone">
               <h1>My Name</h1>
               <h2>Intern at xxx  | Greater xxx Area</h2>
               <Link to="/about" className="flat-button">Learn More</Link>
           </div>
           <div className="profile-img">
             <img src={Headshot} alt="Headshot"/>
           </div>
       </div>
   ) 
}

4. 可选：优化字体响应式 #

避免大标题在小屏幕溢出，添加媒体查询调整字体大小：

@media (max-width: 1280px) {
  .home-page h1 {
    font-size: 50px;
  }
}

@media (max-width: 768px) {
  .home-page h1 {
    font-size: 36px;
  }
}

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