如何在矩形右上角上方添加带文本的圆形（CSS布局问题）

我需要在深蓝色矩形（.home-blue-box）的右上角上方添加一个带文本的圆形，尝试多种方法均未实现，网站代码结构较为杂乱。目标效果为圆形位于矩形右上角外侧上方，内部包含文本。

当前代码 #

HTML #

<main id="primary" class="site-main">
  <div id="section-slide">
    <div class="home-slider">
      <div class="span_4_of_4 fifty-trans" alt="" style="background: linear-gradient(to left, rgb(255 0 0 / 0%) 50%, rgb(5 42 62 / 50%) 50%); background-repeat: no-repeat; background-size: cover; background-position: center; height: 715px; position: absolute;"></div>
      <?php if ( have_rows('home_slider')): while ( have_rows('home_slider')): the_row(); ?>
      <?php $image = wp_get_attachment_image_src(get_sub_field('slide_image'), 'slider-image'); ?>
      <div class="span_4_of_4 mainhomebg" alt="" style="background: url(<?php echo $image[0]; ?>); background-repeat: no-repeat; background-size: cover; background-position: center; height: 715px; z-index: -1;"></div>
      <div class="container home-slider-content">
        <div class="row group flex">
          <div class="spanfull_2_of_4">
            <div class="heading-padding font-yellow FuturaPTDemi font-extra-large lineheight-double">
              <?php the_field('slide_heading'); ?>
            </div>
            <div class="heading-padding font-white FuturaPTDemi font-extra-large lineheight-double">
              <?php the_field('property_name'); ?>
            </div>
            <a style="text-decoration: none;" href="<?php the_field('property_link'); ?>">
              <div class="yellow-button-long">
                <div class="blue-text OpenSansSemibold">EXPLORE THIS ACCOMMODATION</div>
              </div>
            </a>
          </div>
        </div>
        <div class="home-circle"></div>
        <div class="home-blue-box span_2_of_5 flex-center flex-wrap home-bg-darkblue padding-three">
          <h1>Some text</h1>
          <a style="text-decoration: none;" href="#">
            <div class="home-yellow-button" style="margin: 20px auto 0;">
              <div class="black-text OpenSansSemibold">Get Started</div>
            </div>
          </a>
        </div>
      </div>
    </div>

CSS #

.home-blue-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.home-bg-darkblue {
  background-color: #253250;
  text-align: left;
  padding-bottom: -200px;
}

.student-header {
  font-family: futura-pt, sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #000000;
  font-size: 35px;
  line-height: normal;
}

.home-yellow-button {
  width: 260px;
  height: 50px;
  background: linear-gradient(to right, #fddc18 80%, rgb(252 220 22 / 50%) 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  margin-top: 20px;
}

.home-yellow-button:hover {
  background-position: left bottom;
}

.home-circle {
  position: absolute;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  border: 3px solid white;
  right: -20%;
  margin-left: -25px;
  top: -20px;
  background: red;
}

解决方案 #

1. 调整HTML结构 #

将.home-circle移动到.home-blue-box内部，作为其子元素，确保定位参考系正确：

<div class="home-blue-box span_2_of_5 flex-center flex-wrap home-bg-darkblue padding-three">
  <!-- 把圆形放在矩形内部最上方 -->
  <div class="home-circle">文本</div>
  <h1>Some text</h1>
  <a style="text-decoration: none;" href="#">
    <div class="home-yellow-button" style="margin: 20px auto 0;">
      <div class="black-text OpenSansSemibold">Get Started</div>
    </div>
  </a>
</div>

2. 修改CSS定位与样式 #

更新.home-blue-box和.home-circle的CSS，实现精准定位和文本居中：

.home-blue-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  /* 新增：让子元素绝对定位以当前元素为基准 */
  position: relative;
}

.home-circle {
  position: absolute;
  height: 40px;
  width: 40px;
  border-radius: 50%; /* 用50%确保完美圆形 */
  border: 3px solid white;
  /* 定位到矩形右上角外侧上方 */
  right: -20px; /* 向右偏移自身一半宽度，贴合矩形边缘 */
  top: -20px; /* 向上偏移自身一半高度，贴合矩形顶部 */
  background: red;
  /* 文本居中样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: bold;
}

核心要点 #

• 必须给.home-blue-box添加position: relative，否则.home-circle会以页面或其他父元素为定位基准，导致位置错误。
• 将圆形移到矩形内部，避免和页面中其他绝对定位元素的布局冲突。
• 使用border-radius: 50%替代固定数值，确保圆形适配不同尺寸。
• 通过right: -20px和top: -20px（圆形尺寸的一半），让圆形刚好卡在矩形右上角的外侧上方。
• 用flex布局实现圆形内文本的垂直水平居中。

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