如何实现Logo置于Navbar上方的前端页面布局？

需求实现要点 #

• Logo居中置于页面最顶部
• Navbar整体在Logo下方居中，顶部区域被Logo部分遮挡
• Navbar的导航按钮均匀分布在Logo左右两侧

修改后的完整代码 #

HTML代码

<div class="logo-container">
  <img src="https://via.placeholder.com/100" alt="网站Logo" class="logo">
</div>

<div class="navbar">
  <div class="nav-left">
    <a href="#home">Home</a>
    <a href="#news">News</a>
  </div>
  <div class="nav-logo-placeholder"></div>
  <div class="nav-right">
    <div class="dropdown">
      <button class="dropbtn">Server <i class="fa fa-caret-down"></i></button>
      <div class="dropdown-content">
        <a href="#">Server 2</a>
        <a href="#">Server 1</a>
      </div>
    </div>
    <a href="#news">Discord</a>
  </div>
</div>

<div class="content">
  <p>滚动页面可测试导航栏粘性效果...</p>
  <p>更多页面内容...</p>
</div>

CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 40px;
}

/* Logo相关样式 */
.logo-container {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-bottom: -30px;
}

.logo {
  width: 100px;
  height: auto;
}

/* Navbar核心布局 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: grey;
  padding: 14px 0;
  position: relative;
  z-index: 5;
}

.nav-left, .nav-right {
  display: flex;
  gap: 0;
}

/* 中间占位，保证按钮对齐Logo两侧 */
.nav-logo-placeholder {
  width: 100px;
}

/* 导航按钮通用样式 */
.navbar a {
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  position: relative;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 20;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.content {
  padding: 16px;
}

/* 粘性导航适配 */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

.sticky ~ .logo-container {
  position: fixed;
  top: 0;
  width: 100%;
}

关键调整说明 #

1. 结构拆分：将Logo从Navbar中独立出来，通过层级控制实现遮挡效果，比原结构更易维护
2. 遮挡实现：给logo-container设置负margin-bottom，让Navbar向上偏移；同时设置z-index:10确保Logo显示在Navbar上方
3. 按钮对齐：用Flex布局拆分Navbar为左、中、右三部分，中间占位元素宽度与Logo一致，保证导航按钮刚好分布在Logo两侧
4. 粘性导航优化：调整粘性状态下的元素定位，避免滚动时布局错位
5. 盒模型统一：添加全局box-sizing: border-box，避免内边距和边框破坏布局尺寸

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