固定导航栏设position:fixed后标题左移求助：按钮左对齐标题右对齐失效

这问题我之前做项目时也踩过坑！当给header加上position:fixed后，它会脱离正常文档流，默认宽度不再自动撑满父容器，而且内部元素的布局很容易“跑偏”。咱们用两种方法来搞定，优先推荐更简洁的flex方案：

方法一：Flex布局（最省心） #

直接用flex的空间分布属性就能轻松实现左右对齐，不用折腾定位：

HTML结构 #

<header class="fixed-header">
  <div class="nav-buttons">
    <button>首页</button>
    <button>分类</button>
    <button>我的</button>
  </div>
  <h2 class="page-title">我的网站</h2>
</header>

<!-- 正文内容 -->
<main>
  <!-- 这里放页面内容 -->
</main>

CSS样式 #

.fixed-header {
  /* 固定定位到顶部 */
  position: fixed;
  top: 0;
  left: 0;
  /* 必须设置宽度100%，否则fixed后会收缩到内容宽度 */
  width: 100%;
  /* 加内边距避免元素贴边 */
  padding: 12px 24px;
  background-color: #fff;
  /* 用flex实现左右分布 */
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 左右两端对齐 */
  /* 防止被下方内容覆盖 */
  z-index: 999;
}

/* 记得给body添加上边距，避免正文被固定导航挡住 */
body {
  padding-top: 60px; /* 数值根据你的导航栏高度调整 */
}

方法二：绝对定位方案（如果你坚持用absolute） #

如果之前尝试absolute没成功，大概率是没给header设置position:relative作为定位上下文，导致标题相对于整个文档定位了：

修改后的CSS（针对absolute方案） #

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 12px 24px;
  background-color: #fff;
  /* 关键：给header设置relative，让内部absolute元素以它为基准 */
  position: relative;
  z-index: 999;
}

.page-title {
  position: absolute;
  top: 50%; /* 垂直居中 */
  right: 24px; /* 距离右边的距离，和header的内边距对应 */
  transform: translateY(-50%); /* 微调垂直居中 */
}

为什么之前的absolute没生效？ #

你之前没解决的原因应该是：没有给父级header设置position:relative，此时标题的position:absolute会相对于整个浏览器窗口定位，而不是相对于header。再加上fixed后的header宽度收缩，就导致标题跟着左移了。

相比之下，flex布局更直观，也不用处理定位的各种细节，推荐优先使用~

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