如何让页面Sign Up按钮固定顶部且不影响其他元素布局？

核心问题是signup-container用了fixed脱离了文档流，导致它不参与header-container的flex布局；同时.btn的冗余margin把布局彻底搅乱了。按下面修改就能搞定：

修改后的CSS #

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px; /* 左右加padding，避免元素贴页面边缘 */
  background-color: #fff;
  /* 如果想让整个header滚动时固定在顶部，添加这一行：position: sticky; top: 0; z-index: 100; */
}

/* Logo格式化 */
.logo-container {
  padding: 10px;
}

.logo-container img {
  width: 150px;
  height: auto;
}

nav {
  text-align: center;
  flex: 1;
  /* 删掉硬编码的负margin，靠flex布局自然居中导航 */
}

nav a {
  color: #4a4a4a;
  text-decoration: none;
  padding: 14px 16px;
  display: inline-block;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  position: relative;
}

nav a::before {
  content: '';
  position: absolute;
  top: 80%;
  left: 0;
  width: 0;
  height: 3px;
  background: #383838;
  transition: width 0.3s ease;
}

nav a:hover::before {
  width: 100%;
}

.signup-container {
  /* 删掉position:fixed、top、right，让它回到flex容器的布局流中 */
}

/* 右上角的注册按钮 */
.btn {
  width: 150px;
  height: 40px;
  color: #fff;
  background: #000;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  /* 删掉冗余的margin，靠header的align-items:center实现垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0 #A6A6A6;
  transition: 0.5s;
}

.btn:hover {
  box-shadow: 8px 10px 0 #A6A6A6;
}

修改说明 #

1. 移除fixed定位：让signup-container重新成为flex容器的子元素，跟着header一起布局，不会单独固定在页面上乱跑。
2. 清理按钮冗余margin：原来的margin:50px和margin-top:35px是布局错位的核心原因，删掉后靠header的align-items:center实现按钮垂直居中。
3. 优化header内边距：给header-container加左右padding，避免Logo和按钮贴到页面边缘，视觉更舒适。
4. 去掉导航硬编码负margin：原来的margin-left:-180px是临时凑出来的居中方案，现在靠flex的flex:1让nav占满中间空间，自然实现导航链接居中。

如果需要整个header滚动时固定在顶部，只需要给.header-container添加position: sticky; top: 0; z-index: 100;，这样整个header（包括按钮）都会固定，又不会出现按钮单独脱离布局的问题。

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