您的布局被破坏可能是因为顶部2必须基于bottom定位，底部2必须基于top定位，因为内容被添加到容器的末尾。
绝对定位应该足够了。

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: centeR;
}

.container {
  position: relative;
}

.card {
  position: absolute;
  width: 350px;
  height: fit-content;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: yellow;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

.card:nth-last-child(1) {
    left: 100px;
    background: green;
}

.card:nth-last-child(2) {
    background: red;
    bottom: 100px;
}

.card:nth-last-child(3) {
    background: blue;
    left: -100px;
    bottom: 0;
    transform: translateX(-100%);
}

.card:nth-last-child(4) {
    background: brown;
    top: 100px;
    transform: translateX(-100%);
}

<div class="container">
  <div class="circle"></div>
  <div class="card">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorems with the re Ipsum passages, ay unchanged. It was popularised in the 1960s with the release of Letraset sheetsnd more recently with desktop publishing softwgalley of type and scrambled it to make a type specimen book. It has survivedy unchanged. It was popularised in the 1960s with the release of Letraset sheets not only ktop publishfive ceny unchanged. It was popularised in the 1960s with the release of Letraset sheetsy unchanged. It was popularised in the 1960s with the release of Letraset sheetsturies, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknowsed in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letrass wstting industry. Loe 1960s ws  with the re 1960s ws  with the reith the release of Letraset shrem Ipsum has been the industry'ised in the 1960s ws  with the rewstting industry. Lorem Ipsum has bektop publishen the industry'ised in the 1960s ws  with the reset sheets containing Lorem Ipsum passages, and more recently with desktop publishing softwand more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting iktop publishndustry. Lorem Ipsum has been the industry'ised in the 1960s wstting industry. Lorem Ipsum has been the industry'ised in thee 1960s ws  with the re 1960s ws  with the reith the release of Letraset shs e 1960s ws  with the re 1960s ws  with etraset shs etraset shs etraset shs the reith te 1960s ws  with the re 1960s ws  with the reith the release of Letraset shhe release of Letraset shwstting industry. Lorem Ipsum has been the industry'ised in the 1960s ws  with the re 1960s ws  with the reith the release of Letraset sheets s with the re Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="card">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has sur1960s ws  with the reith the relektop publishase of Letraset shhe release of Letraset shwstting indu1960s ws  with the reith the release of Letraset shhe release of Letraset shwstting indu1960s ws  with the reith the release of Letraset shhe release of Letraset shwstting indu1960s ws  with the reith the release of Letraset shhe release of Letraset shwstting induvived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>

我相信你的问题来自于absolute的定位。
通过使用网格，您应该能够相对于网格中心定位每张卡。然后，你只需要把圆放在中心。
请注意，您仍然需要翻译卡才能获得您正在寻找的这个转变，简单的transform: translate(x, y);就可以了。
让我知道这是否回答了你的问题：

.container {
  position: relative;
  height: 1500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.circle {
  align-self: end;
  justify-self: end;
  grid-area: 1 / 1 / 2 / 2;
  transform: translate(50%, 50%);
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background-image: linear-gradient(to bottom, #00aeef 0%, #0095da 25%, #0071b4 50%, #0061af 75%, #293996 100%);
}

.inner-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
}

.testimonial-wrapper {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
}

/* testimonial card style */

.testimonial-card {
  width: 406px;
  max-height: 888px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 32px;
  padding: 48px;
  border-radius: 16px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 1);
  background-color: #fff;
}

.card1 {
  grid-area: 1 / 1 / 1 / 1;
  align-self: end;
}

.card2 {
  align-self: end;
}

.card3 {
  align-self: start;
}

.card4 {
  align-self: start;
}

<div class="container">
  <div class="testimonial-wrapper">
    <div class="testimonial-card card1">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
      </p>
    </div>
    <div class="testimonial-card card2">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
      </p>
    </div>
    <div class="testimonial-card card3">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
      </p>
    </div>
    <div class="testimonial-card card4">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum cumque enim earum, libero ipsam dolor. Alias, deleniti autem illum quas ducimus veniam, optio ipsa a mollitia quasi ipsam laudantium inventore!
      </p>
    </div>
    <div class="circle">
      <div class="inner-circle"></div>
    </div>
  </div>
</div>

定位绝对将工作-与一些改变的方式，你的立场卡。
此代码段从容器中删除了flex，但保留了圆居中的方式。
它将每张卡片相对于要与圆直径对齐的相关侧进行定位，并使用translateX/Y将其定位在离圆稍远的位置（为了方便起见，它使用圆的直径来完成此操作，当然如果您希望它更大，可以添加更多）。
为了帮助将来在需要时进行调整，代码片段根据圆的直径（CSS变量--d）进行计算。

<style>
  .testi {
    max-width: 1280px;
    margin: 0 auto;
  }
  
  .container {
    position: relative;
    height: 1500px;
    width: 100vw;
    --d: 138px;
    --r: calc(var(--d) / 2);
  }
  
  .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--d);
    height: var(--d);
    border-radius: 50%;
    background-image: linear-gradient(to bottom, #00aeef 0%, #0095da 25%, #0071b4 50%, #0061af 75%, #293996 100%);
  }
  
  .inner-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(80 / 138 * var(--d));
    height: calc(80 / 138 * var(--d));
    border-radius: 50%;
    background-color: #fff;
  }
  /* testimonial card style */
  
  .testimonial-card {
    position: absolute;
    width: 406px;
    max-height: 888px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 32px;
    padding: 48px;
    border-radius: 16px;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
  }
  
  .testimonial-card {
    width: 406px;
    max-height: 888px;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 32px;
    padding: 48px;
    border-radius: 16px;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
  }
  
  .testimonial-card-title {
    font-family: Gotham;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.44;
    letter-spacing: normal;
    text-align: left;
    color: #757584;
  }
  
  .testimonial-person-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .testimonial-card-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
  }
  
  .person-detail {
    width: 250px;
  }
  
  .person-name {
    height: 20px;
    font-family: Gotham;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #263746;
  }
  
  .person-des {
    font-family: Gotham;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #263746;
  }
  
  .location-container {
    display: flex;
    justify-content: space-between;
  }
  
  .Location {
    width: 24px;
    height: 24px;
    flex-grow: 0;
    object-fit: contain;
  }
  
  .office-title {
    width: 106px;
    font-family: Gotham;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #263746;
  }
  /* End of testimonial-card style */
  
  .card1 {
    right: calc(50% - var(--d));
    bottom: 50%;
    right: 50%;
    transform: translateX(calc(-1 * var(--d)));
  }
  
  .card2 {
    left: 50%;
    bottom: 50%;
    transform: translateY(calc(-1 * var(--d)));
  }
  
  .card3 {
    right: 50%;
    top: 50%;
    transform: translateY(var(--d));
  }
  
  .card4 {
    left: 50%;
    top: 50%;
    transform: translateX(var(--d));
  }
</style>
<div class="container">
  <div class="circle">
    <div class="inner-circle"></div>
  </div>
  <div class="testimonial-wrapper">
    <div class="testimonial-card card1">
      <div class="testimonial-card-title">
        “This will be my third year at HUB working on the Human Resources team. As a military spouse, it can be hard to find a role that allows you to advance in your career, but also be there for your service member and family. HUB has granted me that, and so
        much more. My supervisor understands my situation and continuously supports me through it. When my husband deployed, my team rallied around me and celebrated with us when he returned. The Military Veterans & Military Family Voices group is a special
        place where anyone who is in the military community has instant comradery and support. What I am impressed with most is this group’s ability to actively listen to each other’s experiences and draw lessons on how to be a better advocate from it.”
      </div>
      <div class="testimonial-person-wrapper">
        <img class="testimonial-card-image" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&amp;s=3d2e8a2039c06dd26db977fe6ac6186a">
        <div class="person-detail">
          <div class="person-name">
            Glenn Agoncillo
          </div>
          <div class="person-des">
            Vice President of Constituent Experience and Co-chair of HUB Pride (LGBT) Voices
          </div>
          <div class="location-container">
            <img src="Location.png" class="Location" alt="location-icon">
            <div class="office-title">Office Location</div>
          </div>

        </div>

      </div>
    </div>
    <div class="testimonial-card card2">
      <div class="testimonial-card-title">
        “My passion is to give a voice to those who are underrepresented. As someone who fits into that category, I’m passionate about bringing awareness and opportunities to those who look like me and making allies out of those who don’t. HUB Black Inclusion
        Network does just that; it provides a safe and collaborative space for this while enhancing HUB’s inclusive culture and expanding our diversity footprint.”
      </div>
      <div class="testimonial-person-wrapper">
        <img class="testimonial-card-image" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&amp;s=3d2e8a2039c06dd26db977fe6ac6186a">
        <div class="person-detail">
          <div class="person-name">
            Glenn Agoncillo
          </div>
          <div class="person-des">
            Vice President of Constituent Experience and Co-chair of HUB Pride (LGBT) Voices
          </div>
          <div class="location-container">
            <img src="Location.png" class="Location" alt="location-icon">
            <div class="office-title">Office Location</div>
          </div>

        </div>

      </div>
    </div>
    <div class="testimonial-card card3">
      <div class="testimonial-card-title">
        “In order for HUB to thrive, we must embrace diversity and inclusion so we can continue to serve all our clients from all walks of life. HUB Women Network (HWN) provides a forum to help women of all levels and diversity at HUB be able to Engage, Empower,
        and Excel in all aspects of their lives. Through monthly calls, webinars, and panel discussions, we create a safe space for women to speak freely, engage with others and exchange insights.”
      </div>
      <div class="testimonial-person-wrapper">
        <img class="testimonial-card-image" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&amp;s=3d2e8a2039c06dd26db977fe6ac6186a">
        <div class="person-detail">
          <div class="person-name">
            Glenn Agoncillo
          </div>
          <div class="person-des">
            Vice President of Constituent Experience and Co-chair of HUB Pride (LGBT) Voices
          </div>
          <div class="location-container">
            <img src="Location.png" class="Location" alt="location-icon">
            <div class="office-title">Office Location</div>
          </div>

        </div>

      </div>
    </div>
    <div class="testimonial-card card4">
      <div class="testimonial-card-title">
        “This year I’ll be celebrating 6 years working at HUB in the Risk Services Division and I am very proud to be involved in all the different opportunities to create a culture of diversity, equity, and inclusion in all regions. Now there are several ways
        to get involved as a leader, a participant, and an ambassador to do our part here at HUB. The Asian American/Pacific Islander community is a special place for me, to feel the genuine connection I have with other colleagues because of our similar
        cultural background. I am Chinese and Filipino, and this community provides me a natural way to support, connect and identify with other peers all while working at HUB.”
      </div>
      <div class="testimonial-person-wrapper">
        <img class="testimonial-card-image" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&amp;s=3d2e8a2039c06dd26db977fe6ac6186a">
        <div class="person-detail">
          <div class="person-name">
            Glenn Agoncillo
          </div>
          <div class="person-des">
            Vice President of Constituent Experience and Co-chair of HUB Pride (LGBT) Voices
          </div>
          <div class="location-container">
            <img src="Location.png" class="Location" alt="location-icon">
            <div class="office-title">Office Location</div>
          </div>

        </div>

      </div>
    </div>
  </div>

</div>

您可能会考虑将卡片的尺寸也放入CSS变量中，可能与视口的宽度相关，以便整个事情变得更具响应性。