HTML/CSS布局问题：调整窗口大小时角落div与顶部div重叠如何解决

AI 小北

2026-9-27

问题原因

存在属性书写错误：cornerBox 规则中的 display: fixed 是无效属性，fixed 属于 position 的可选值，不属于 display 的取值范围，浏览器会直接忽略这条规则。你同时给 cornerBox 设置了 position: absolute，如果没有给父元素设置非 static 定位，它会默认相对于整个文档流定位，和「固定在两个矩形交界」的需求不符。
定位单位冲突：topbar 宽度、sidebar 左侧偏移用的是百分比，cornerBox 偏移用的是vw/vh，但 cornerBox 本身是固定宽高250px，窗口缩放时，动态偏移量和固定像素的盒子尺寸不匹配，就会出现重叠。
定位逻辑不统一：三个元素的定位基准不一致，混合了相对文档流和相对视口的定位规则，缩放时自然会出现位移错位。

修正方案

统一用固定定位实现需求，避免动态单位和固定单位冲突，修正后的CSS如下：

/* 顶部通栏：左侧延伸到距离右侧80px的位置，高度可自行调整，此处和原有cornerBox的10vh偏移对应 */
.topbar {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% - 80px);
  height: 10vh;
  box-sizing: border-box;
}

/* 右侧侧边栏：固定在最右侧，宽度80px，从顶部10vh位置向下延伸 */
.sidebar {
  overflow: hidden;
  position: fixed;
  border: solid 1px #000;
  width: 80px;
  right: 0;
  top: 10vh;
  height: 90vh;
  background-color: #babcbf;
  padding: 2px;
  box-sizing: border-box;
}

/* 角落盒子：固定在topbar右下角、sidebar左上角的交界位置，不会随窗口缩放位移 */
.cornerBox {
  overflow: hidden;
  border: 1px dotted #000;
  background-color: #f1f1f1;
  width: 250px;
  height: 250px;
  position: fixed;
  top: 10vh;
  right: 80px;
  transform: translate(0, -100%);
  box-sizing: border-box;
}