当屏幕缩小CSS/JSX时如何阻止图像与文本重叠？

Question

我一直在构建我的作品集网站，现在正处于使其响应速度更快的阶段。我在使用显示器时构建了该网站，但是当屏幕缩小到标准笔记本电脑（即 Macbook Pro）时，带有我的图像的 div 与我的“文本区域”div/类重叠，其中包含标题和信息等。使用片段在容器外部的图像 div 也没有帮助，所以我有点卡住了。我的预期愿景/目标是始终将图像放在文本旁边，但如果屏幕变小，它会在文本下方或上方移动。

这是 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;
  }
}

Answer 1

在我看来，如果你尝试使用

flexbox (disply: flex)

，（而不是

position: absolute

）像下面的方法，你可以让它更快更容易：

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

.home-page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  .text-zone {
    text-align: center;
    @media (min-width: 768px) {
      width: 40%;
      text-align: left;
    }
    max-height: 90%;
    padding: 0 16px;
  }
    h1 {
        color: white;
        font-size: 80px;
        margin: 0;
        font-family: 'Roboto Mono';
        font-weight: 400;
        animation: fadeIn 1s 1.7s backwards;
    }

    .profile-img {
      margin-top: 140px;
      padding: 0 16px;
      z-index: -1;
      box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);
      @media (min-width: 1200px) {
        margin-right: -180px;
      }


      &: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;
  }
}