基于CSS/HTML创建多元素响应式页面的问题求助

我是HTML和CSS网站设计新手，想要实现带logo头部+两个轻微重叠盒子的页面布局。目前写的代码在某一屏幕尺寸下显示正常，但调整屏幕大小时，盒子无法正确移动适配位置。

我已尝试的代码 #

HTML

<div class="container">
  <div class="header">
    <div class="logo">LOGO</div>
  </div>
  <div class="box1"></div>
  <div class="box2"></div>
</div>

CSS

.header {
  position: absolute;
  width: 100%;
  min-height: 18rem;
  left: 0;
  top: 0;
  background: #F1E579;
}

.logo {
  font-size: 350%;
  font-family: Above;
  margin-left: 3rem;
  margin-top: 2.75rem;
}

.box1 {
  position: absolute;
  width: 37rem;
  min-height: 40rem;
  left: 7.8rem;
  top: 12.3rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

.box2 {
  position: absolute;
  width: 42rem;
  min-height: 45rem;
  left: 44rem;
  top: 10rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

问题核心是使用了绝对定位+固定单位，导致元素无法随屏幕尺寸自适应。改用Flexbox布局+相对单位，就能实现响应式适配。

修改后的代码 #

HTML

<div class="container">
  <div class="header">
    <div class="logo">LOGO</div>
  </div>
  <div class="boxes-wrapper">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</div>

CSS

/* 全局重置，消除默认边距和盒模型问题 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.header {
  width: 100%;
  min-height: 18rem;
  background: #F1E579;
  display: flex;
  align-items: center;
  padding-left: 5%; /* 用百分比替代固定margin，适配不同屏幕 */
}

.logo {
  font-size: clamp(2rem, 5vw, 3.5rem); /* 响应式字体，随屏幕自动缩放 */
  font-family: 'Above', sans-serif;
}

.boxes-wrapper {
  width: 90%;
  margin: 0 auto;
  display: flex;
  gap: 2%;
  position: relative;
  top: -6rem; /* 让盒子向上重叠头部 */
}

.box1 {
  flex: 0 1 40%; /* 占容器40%宽度，可缩小不放大 */
  min-height: 40rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  z-index: 1; /* 确保box1在重叠层上方 */
}

.box2 {
  flex: 0 1 55%; /* 占容器55%宽度 */
  min-height: 45rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  align-self: flex-start;
  margin-top: -2rem; /* 实现box2向上偏移的重叠效果 */
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .boxes-wrapper {
    flex-direction: column;
    top: -3rem;
  }
  .box2 {
    margin-top: -4rem;
    margin-left: 5%; /* 小屏幕下保持轻微重叠感 */
  }
}

关键改进点 #

• 移除全局绝对定位，改用相对定位+Flexbox实现自适应布局
• 用**百分比、vw、clamp()**替代固定rem值，让元素随屏幕缩放
• 通过z-index和margin-top控制盒子的重叠层次和位置
• 添加媒体查询，在小屏幕下自动切换为垂直布局，保留设计效果

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