如何用position:absolute实现导航栏大圆形图标与其他元素相对定位

问题背景 #

需要在导航栏中添加一个内嵌图片的圆形元素，该圆形尺寸需大于导航栏。使用position:absolute固定位置时，小屏幕下圆形会覆盖导航栏其他选项；移除该属性后，导航栏被圆形撑高，其他元素垂直对齐导致导航栏过厚。要求保持导航栏原有高度、元素对齐方式的同时，让圆形与其他元素相对定位并水平居中。

修改后的HTML（无需调整核心结构） #

<nav class="navbar p-4 z-2 justify-content-center align-items-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;
    /* 强制导航元素垂直居中 */
    align-items: center;
    /* 固定导航栏高度，避免被圆形撑大 */
    height: 80px;
}

nav a {
    color: white;
}

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

.circle {
    width: 155px;
    height: 155px; /* 固定高度保证正圆 */
    background-color: #d58d26;
    border-radius: 50%;
    /* 相对定位实现偏移，不脱离文档流 */
    position: relative;
    /* 向上偏移自身一半高度，垂直居中于导航栏中线 */
    transform: translateY(-50%);
    /* 负外边距抵消部分高度，防止撑高导航栏 */
    margin-top: -37.5px;
    /* 内部图片居中对齐 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle img {
    width: 120px; /* 适配圆形的图片尺寸 */
    height: auto;
}

.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;
}

/* 小屏幕适配，避免圆形覆盖导航选项 */
@media (max-width: 992px) {
    nav a.nav-item:not(:last-child) {
        margin-right: 20px;
    }
    .circle {
        width: 120px;
        height: 120px;
        margin-top: -20px;
    }
    .circle img {
        width: 90px;
    }
}

方案核心逻辑 #

• 固定导航高度：给nav设置固定height，从根源上避免圆形元素撑高导航栏
• 圆形精准定位：通过position: relative和transform: translateY(-50%)让圆形垂直居中于导航栏中线，负margin-top抵消多余高度，同时不脱离文档流，保证与其他元素相对位置正确
• 内部元素对齐：给.circle添加flex布局，确保内嵌图片在圆形内居中显示
• 响应式适配：媒体查询缩小圆形尺寸、减少导航元素间距，解决小屏幕下的覆盖问题

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