使用“position:absolute”保持元素相对于另一个元素

Question

我正在尝试向导航栏添加一个内部带有图像的圆圈。圆圈必须比导航栏大，如下图所示：

我使用“位置：绝对”，因此圆圈保持在该位置，问题是在较小的屏幕上，它看起来像这样：

覆盖导航栏项目，如何保持圆圈原样，但使其相对于其余导航栏项目的位置？

我尝试从圆圈中删除“位置：绝对”属性，但这会使导航栏增加其高度以匹配圆圈的高度并将导航栏项目与圆圈垂直对齐，如下所示：

使导航栏太厚。如果我可以做一些事情来保持导航栏高度和项目与其对齐，同时使圆圈与其余项目水平居中，那就完美了。

HTML：

  <nav class="navbar p-4 z-2 justify-content-center">
    <div class="circle me-4">
      <img src="images/logo.png" alt="Logo" class="img-fluid">
    </div>
    <a class="nav-item text-white text-decoration-none" href="#">MENU</a>
    <a class="nav-item text-white text-decoration-none" href="#">LOCATION & HOURS</a>
    <a class="nav-item text-white text-decoration-none" href="#">ABOUT US</a>
    <div id="socials" class="d-flex">
      <div class="sm-circle me-2">
        <a href="#" class="text-decoration-none">
          <img src="images/facebook_logo.png" alt="Facebook Logo" class="img-fluid">
        </a>
      </div>
      <div class="sm-circle me-2">
        <a href="#">
          <img src="images/instagram_logo.png" alt="Instagram Logo" class="img-fluid">
        </a>
      </div>
      <div class="sm-circle">
        <a href="#">
          <img src="images/tripadvisor_logo.png" alt="TripAdvisor Logo" class="img-fluid">
        </a>
      </div>
    </div>
  </nav>

CSS：

nav {
    position: absolute !important; 
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #d58d26;
}

nav a {
    color: white;
}

nav a.nav-item:not(:last-child) {
    margin-right: 55px;
}

.circle {
    width: 155px;
    height: auto;
    background-color: #d58d26;
    border-radius: 50%;
}

.sm-circle {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 50%;
}

.sm-circle img {
    width: 27px;
    height: auto;
}

Answer 1

图像可能需要位于导航容器之外才能正常工作。您是否尝试过用 , 包裹图像，并将 包含在该标签中。然后在css中设置margin right样式将图像推到正确的位置？