如何在页面顶部设置两个固定div？求关闭Banner后Header归位的纯CSS方案

当然可以！不用JavaScript，纯靠CSS就能实现这个需求——我们可以用隐藏的复选框和兄弟选择器来做状态切换。下面是调整后的完整代码和思路讲解：

核心思路 #

我们用一个隐藏的复选框作为开关，把Banner里的关闭按钮做成和这个复选框绑定的<label>。用户点击关闭按钮时，其实是触发了复选框的checked状态，然后通过CSS的:checked伪类+兄弟选择器，来控制Banner隐藏、Header移动到顶部，同时调整主内容的内边距避免被遮挡。

调整后的HTML代码 #

<input type="checkbox" id="close-banner">
<div class="banner">
  This is the banner that can be closed
  <label for="close-banner" class="close-btn">X</label>
</div>
<div class="header">This is the header</div>
<div class="main">
  content<br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br>
</div>

对应的CSS代码 #

/* 隐藏复选框，只保留功能 */
#close-banner {
  display: none;
}

.banner {
  position: fixed;
  top: 0;
  background-color: #f0f;
  height: 120px;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  transition: height 0.3s ease, padding 0.3s ease; /* 平滑关闭动画 */
}

/* 关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  font-weight: bold;
  padding: 0.25rem 0.5rem;
  background: #fff;
  border-radius: 3px;
}

.header {
  position: fixed;
  top: 120px; /* 默认紧贴Banner底部，Banner高度是120px */
  background-color: #f00;
  height: 100px;
  width: 100%;
  transition: top 0.3s ease; /* 平滑移动动画 */
}

.main {
  background-color: #ff0;
  padding-top: 220px; /* 默认预留Banner+Header的高度，避免内容被遮挡 */
  padding-bottom: 120px;
  transition: padding-top 0.3s ease; /* 平滑调整内边距 */
}

/* 复选框被选中时的状态：隐藏Banner、移动Header、调整主内容内边距 */
#close-banner:checked ~ .banner {
  height: 0;
  overflow: hidden;
  padding: 0;
}

#close-banner:checked ~ .header {
  top: 0;
}

#close-banner:checked ~ .main {
  padding-top: 100px; /* 只预留Header的高度 */
}

额外说明 #

• 我调整了Header默认的top值为120px（和Banner高度一致），这样默认状态下Header不会和Banner重叠，你可以根据实际需求修改数值。
• 加入的transition属性是为了让关闭和移动过程更流畅，如果你不需要动画，可以直接删掉这些属性。
• 关闭按钮的样式可以根据你的设计需求自定义，这里只是做了一个简单的示例。

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