CSS布局异常：设置z-index后页面上方空白疑似.add-book导致

问题根因 #

页面上方的空白确实是.add-book导致的——你给它设置了position: relative + top: 4.7rem。相对定位的元素只是视觉上偏移，它原本占据的页面空间会被保留，所以哪怕元素被移到了下方，顶部还是会留出它初始位置的空白。

另外，.main-container设置z-index: -1完全没必要，反而会让它跑到body背景层下方，容易引发后续层级冲突，建议调整。

修复步骤 #

1. 改.add-book为绝对定位 #

把position: relative换成position: absolute，让元素脱离文档流，不再占据原有空间，同时简化定位写法：

.add-book {
  width: 15rem;
  height: 23rem;
  background-color: rgb(237, 237, 237);
  z-index: 20; /* 不需要加+号，直接写数字即可 */
  position: absolute; /* 替换relative */
  top: 4.7rem;
  right: 10px; /* 替换left的calc写法，更简洁直观 */
  border-radius: 17px;
  display: flex;
  opacity: 1;
  flex-direction: column;
  align-items: center;
}

如果希望弹窗相对于页面整体定位，给body加position: relative，这样绝对定位的元素会以body为参考容器。

2. 修正.main-container的层级 #

删掉z-index: -1，默认情况下后渲染的元素层级更高，.add-book本来就会在.main-container上方，没必要把底层元素压到背景下面：

.main-container {
  width: 100%;
  background-color: antiquewhite;
  height: calc(100vh - 4rem);
  /* 删除z-index: -1 */
}

3. 优化弹窗显隐逻辑 #

默认把弹窗设为隐藏，通过active类切换显示，同时加过渡动画提升体验：

.add-book {
  /* 其他样式保留 */
  opacity: 0; /* 默认隐藏 */
  pointer-events: none; /* 隐藏时不响应点击 */
  transition: opacity 0.2s; /* 添加平滑过渡 */
}

.add-book.active {
  opacity: 1;
  pointer-events: auto; /* 显示时恢复点击交互 */
}

完整修复后的CSS代码 #

body {
  margin: 0;
  font-family: Montserrat;
  position: relative; /* 为绝对定位元素提供参考 */
}

nav {
  height: 4rem; /* 和main-container的calc(100vh-4rem)对应 */
  background-color: #fff; /* 示例背景，可按需调整 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

.add {
  font-family: Montserrat;
  margin-right: 2rem;
  height: 3rem;
  border-radius: 20px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 1rem;
  border: 0;
  cursor: pointer;
  background-color: rgb(248, 248, 248);
  transition: 0.1s;
}

.add:hover {
  background-color: rgb(245, 245, 245);
}

.add:active {
  background-color: rgb(237, 237, 237);
}

.add-book {
  width: 15rem;
  height: 23rem;
  background-color: rgb(237, 237, 237);
  z-index: 20;
  position: absolute;
  top: 4.7rem;
  right: 10px;
  border-radius: 17px;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  flex-direction: column;
  align-items: center;
}

.add-book.active {
  opacity: 1;
  pointer-events: auto;
}

.add-book h2 {
  margin: 0;
  margin-top: 15px;
}

.add-book h3 {
  margin: 0;
}

.input-container {
  margin-top: 20px;
}

.input-container input {
  width: 12rem;
  margin-top: 5px;
}

.checkbox-container {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 12rem;
}

.checkbox-container input {
  transform: scale(1.2);
}

.add-book button {
  margin-top: auto;
  margin-bottom: 25px;
  height: 2.3rem;
  width: 12rem;
  border-radius: 10px;
  border: solid 2px rgb(225, 225, 225);
  background-color: rgb(248, 248, 248);
  cursor: pointer;
  transition: 0.1s;
}

.add-book button:hover {
  background-color: rgb(245, 245, 245);
}

.add-book button:active {
  background-color: rgb(237, 237, 237);
}

.main-container {
  width: 100%;
  background-color: antiquewhite;
  height: calc(100vh - 4rem);
}

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