如何让图标上移覆盖水平线并消除导航栏与水平线间空白块

问题分析 #

你想要让Logo向上偏移并覆盖下方的水平线，但给.intro__logo添加min-height后，导航栏和水平线之间出现了不必要的空白块。这是因为min-height让.intro__logo容器占据了垂直空间，而absolute定位的Logo并没有消除这个容器的占位。

解决方案 #

通过以下两步调整即可实现需求：

• 移除.intro__logo的min-height属性，消除容器的额外占位
• 给Logo图片添加向上偏移的样式，让它精准覆盖水平线

修改后的代码 #

关键CSS调整：

.intro__logo {
  display: flex;
  justify-content: center;
  /* 移除min-height，避免容器占据垂直空间 */
}

.intro__logo img {
  position: absolute;
  width: 90px;
  height: 90px;
  padding: 15px;
  border-radius: 100%;
  border: 3px solid var(--primary-color);
  background-color: var(--background-color);
  object-fit: contain;
  z-index: 2;
  /* 向上偏移自身高度的50%，让Logo中心对齐水平线，实现覆盖效果 */
  transform: translateY(-50%);
  /* 若需更精准位置，可微调top或margin-top，例如：
  top: 0;
  margin-top: -8px;
  */
}

.intro hr {
  border: 1px solid var(--primary-color);
  margin: 0;
  z-index: 1;
}

完整HTML保持不变：

<header>
  <nav class="header__nav">
    <ul class="header__menu">
      <li>
        <a href="#about-me">About Me</a>
      </li>
      <li>
        <a href="#last-activity">Last Activity</a>
      </li>
      <li>
        <a href="#policy">Policy</a>
      </li>
      <li>
        <span>Blank Blank
      </li>
      <li>
        <a href="#donate">Donate</a>
      </li>
      <li>
        <a href="#feedback">Feedback</a>
      </li>
    </ul>

    <ul class="header__social">
      <li>
        <img src="public/icon-fb.svg" alt="facebook" />
      </li>
      <li>
        <img src="public/icon-ig.svg" alt="instagram" />
      </li>
      <li>
        <img src="public/icon-youtube.svg" alt="youtube" />
      </li>
      <li>
        <img src="public/icon-line.svg" alt="line" />
      </li>
    </ul>

  </nav>
</header>
<section class="intro">
  <div class="intro__logo">
    <img src="public/logo.svg" alt="logo"/>
  </div>
  <hr>
  <div class="intro__page">
    <img src="public/cat-6960532_1280 2.png" alt="intro__background" />
  </div>

</section>

效果说明 #

• 移除min-height后，.intro__logo容器不再占据垂直空间，导航栏和水平线之间的空白会消失
• transform: translateY(-50%)让Logo向上偏移自身高度的一半，刚好与水平线重叠，结合z-index:2确保Logo显示在水平线之上，完全匹配设计图效果

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