Frontend Mentor个人资料卡片组件布局问题求助

我在做Frontend Mentor的个人资料卡片组件挑战时，卡在了圆形头像的定位上，怎么调都不对😅。要么头像和下面的姓名、年龄区域之间出现超大空白，要么姓名h1和所在地h2直接跑到头像后面去了。现在我的尝试版本里，头像位置比预期的要偏下，完全达不到参考图的效果，有没有大佬能帮忙看看哪里出问题了？

我的HTML代码： #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="./style.css">
  <title>Frontend Mentor | Profile card component</title>
  <!-- Feel free to remove these styles or customise in your own stylesheet  -->
  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>
<main>
  <div class="main-container">
    <div class="img-container"></div>
    <!--image added in css-->
    <div class="profile-img">
      <img src="./images/image-victor.jpg" alt="profile img">
    </div>
    <div class="name-age">
      <h1><span>Victor Crest</span> 26</h1>
      <h2>London</h2>
    </div>
    <div class="line-break"></div>
    <div class=".stats">
      <div class="follower-count">
        <p class="num-count">80K</p>
        <p class="stat-txt">Followers</p>
      </div>
      <div class="like-count">
        <p class="num-count">803K</p>
        <p class="stat-txt">Likes</p>
      </div>
      <div class="num-pics">
        <p class="num-count">1.4K</p>
        <p class="stat-txt">Photos</p>
      </div>
    </div>
  </div>
</main>
<div class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
  Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>

我的CSS代码： #

*, *:before, *:after {
  box-sizing: border-box;
}
* {
  padding: 0;
  margin: 0;
}
body {
  height: 100vh;
  width: 100vw;
  background-color: hsl(225, 100%, 94%);
}
main {
  display: grid;
  place-content: center;
  height: 100vh;
  width: 100vw;
}
.main-container {
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 375px;
  border-radius: 1rem;
  overflow: hidden;
}
.img-container {
  position: relative;
  width: 100%;
  height: 200px;
  background: url(./images/bg-pattern-card.svg) no-repeat center center/cover;
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
}
.profile-img {
  z-index: 2;
  position: absolute;
  border-radius: 50%;
  width: 8rem;
}
.profile-img img {
  border-radius: 50%;
  width: 100%;
  border: solid white 7px;
  z-index: 2;
}
.name-age {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
h1,h2 {
  color: gray;
  font-weight: lighter;
}
span {
  color: rgb(1, 0, 34);
  font-weight: bold;
}
.line-break {
  border: solid .1px gray;
  width: 100%;
  margin-top: 6rem;
}

问题分析和修改建议： #

我看了下代码，主要问题集中在头像的定位逻辑和一些小细节上，给你整理了几个修改点：

1. 绝对定位的基准错误
   你的.profile-img用了position: absolute，但它的父元素.main-container没有设置position: relative，所以这个绝对定位是相对于<body>来算的，完全脱离了卡片容器。
   → 给.main-container加上position: relative，这样内部的绝对定位元素会以卡片为基准定位。

2. 头像位置偏移调整
   现在头像偏下，需要让它刚好卡在顶部背景图的下方中间位置。可以这样设置：

   .profile-img {
     z-index: 2;
     position: absolute;
     border-radius: 50%;
     width: 8rem;
     top: 136px; /* 顶部背景图高度200px，头像宽8rem=128px，200 - 128/2 = 136px */
     left: 50%;
     transform: translateX(-50%); /* 水平居中 */
   }
   

   或者更灵活的写法，用transform: translate(-50%, -50%)配合top: 200px（背景图的高度），这样头像会向上偏移自身一半高度，刚好卡在背景图底部中间：

   .profile-img {
     z-index: 2;
     position: absolute;
     border-radius: 50%;
     width: 8rem;
     top: 200px;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   

3. 姓名区域的间距调整
   之前的大空白是因为.line-break的margin-top:6rem太大，而且.name-age没有和头像拉开合适距离。修改：

   .name-age {
     display: flex;
     flex-direction: column;
     align-items: center;
     z-index: 1;
     margin-top: 4rem; /* 给头像下方留出足够空间 */
   }
   .line-break {
     border: solid .1px gray;
     width: 100%;
     margin-top: 2rem; /* 缩小间距 */
   }
   

4. 类名拼写错误
   HTML里的统计区域写了<div class=".stats">，多了个点，应该改成<div class="stats">，不然CSS里的.stats选择器根本选不到这个元素。

5. 补充统计区域的布局
   你还没给.stats写样式，加上flex布局让三个统计项横向排列：

   .stats {
     display: flex;
     justify-content: space-around;
     width: 100%;
     padding: 1.5rem 0;
   }
   .stats > div {
     text-align: center;
   }
   .num-count {
     font-weight: bold;
     color: rgb(1, 0, 34);
     margin-bottom: .2rem;
   }
   .stat-txt {
     font-size: .8rem;
     color: gray;
   }
   

把这些修改加上后，应该就能达到参考图的效果了，你可以试试~

内容来源于stack exchange