我最近在做一个披萨主题的网站，给背景图上叠加了标题、描述和下单按钮，桌面端显示一切正常，但一缩放页面或者用手机打开，文本就开始移位、甚至挤在一起重叠，完全乱套了😭。以下是我当前的代码，求各位大佬帮忙看看问题出在哪，怎么改才能适配不同屏幕？

我当前的代码： #

CSS部分：

.background-pizza { position: relative; display: inline-block; }
.background-pizza, #background-pizza { width: 100%; height: auto; }
.order-title { position: absolute; font-size: 60px; color: white; text-align: center; display: flex; margin: 300px 100px 0 900px; }
.order-paragraph { position: absolute; font-size: 40px; color: white; text-align: center; display: flex; margin: 500px 100px 0 900px; }
.order-header { position: absolute; top: 70%; left: 70%; color: black; background-color: greenyellow; padding: 10px 20px; border-radius: 8px; text-decoration: none; border: 4px solid green; }
.order-header:hover { background-color: darkgreen; }

HTML部分：

<div class="background-pizza">
  <p class="order-title">The Pizza You've Been Waiting For🍕</p>
  <p class="order-paragraph">Handcrafted pizzas, baked<br> to perfection - crispy on the<br> outside, soft on the inside, and<br> topped with love in every slice. </p>
  <a class="order-header" href="Pizzas.html"><h1>Order now</h1></a>
  <img id="background-pizza" src="images/Pizza background.jpg" alt="ERROR">
</div>

问题根源分析： #

1. 固定像素定位/margin是核心问题：你给文本用了margin: 300px 100px 0 900px这种固定像素值，按钮用了top:70%; left:70%，但这个百分比是相对于父容器的，当屏幕宽度变小时，固定的left margin会直接让文本超出屏幕，元素挤在一起重叠。
2. 无响应式字体适配：字体用了固定的60px、40px，小屏幕下字体太大，会导致换行混乱、内容溢出。
3. HTML结构不够合理：用img标签做背景图，布局时需要额外处理层级，换成容器的background-image会更可控。

修复后的完整代码： #

CSS（带注释说明）：

/* 背景容器：用flex实现内容对齐，直接把背景图设为容器背景 */
.background-pizza {
  position: relative;
  width: 100%;
  min-height: 85vh; /* 保证容器高度，可根据需求调整 */
  background: url('images/Pizza background.jpg') center/cover no-repeat; /* 背景图居中铺满容器 */
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 内容靠右侧对齐，和原布局一致 */
  justify-content: center;
  padding-right: 5%; /* 给右侧留间距，替代固定的left margin */
  box-sizing: border-box;
}

/* 标题：用clamp实现响应式字体，随屏幕宽度自动缩放 */
.order-title {
  font-size: clamp(2rem, 5vw, 4rem); /* 最小2rem，最大4rem，中间随屏幕宽度变化 */
  color: white;
  text-align: center;
  margin: 0 0 1.5rem 0; /* 只设上下间距，避免左右固定值 */
}

/* 描述文本：同样用响应式字体，优化行高 */
.order-paragraph {
  font-size: clamp(1.2rem, 3vw, 2.5rem);
  color: white;
  text-align: center;
  line-height: 1.5; /* 调整行高，让换行更舒适 */
  margin: 0 0 2.5rem 0;
  max-width: 420px; /* 限制最大宽度，避免宽屏文本拉太长 */
}

/* 下单按钮：去掉绝对定位，用flex布局自然排列 */
.order-header {
  color: black;
  background-color: greenyellow;
  padding: 0.8rem 1.8rem;
  border-radius: 8px;
  text-decoration: none;
  border: 4px solid green;
  font-size: clamp(1.2rem, 3vw, 2rem);
  transition: background-color 0.3s; /* hover效果加平滑过渡 */
}

.order-header:hover {
  background-color: darkgreen;
  color: white;
}

/* 媒体查询：针对移动端调整布局 */
@media (max-width: 768px) {
  .background-pizza {
    align-items: center; /* 小屏幕下内容居中 */
    padding-right: 0;
    text-align: center;
  }
  
  .order-paragraph {
    max-width: 90%; /* 小屏幕下文本占满90%宽度 */
  }
}

调整后的HTML：

<div class="background-pizza">
  <p class="order-title">The Pizza You've Been Waiting For🍕</p>
  <p class="order-paragraph">Handcrafted pizzas, baked to perfection - crispy on the outside, soft on the inside, and topped with love in every slice.</p>
  <a class="order-header" href="Pizzas.html">Order now</a>
  <!-- 去掉了原img标签，改用容器的background-image实现背景 -->
</div>

修复思路说明： #

1. 用flex替代绝对定位+固定margin：通过flex布局的align-items: flex-end实现内容靠右，不需要给每个文本元素加绝对定位，减少布局冲突。
2. 响应式字体适配：clamp()函数能让字体在最小/最大值之间随屏幕宽度自动缩放，避免小屏幕字体过大、宽屏字体过小的问题。
3. 背景图改为容器属性：直接把背景图设为容器的background-image，布局时不需要考虑img标签的层级和位置，更可控。
4. 媒体查询适配移动端：小屏幕下把内容居中，避免右侧内容超出屏幕，同时调整文本宽度保证可读性。

替换代码后，你可以用浏览器开发者工具切换到移动端模式测试，缩放页面也不会再出现重叠问题啦！如果需要微调内容位置，只需要修改容器的padding或者flex的对齐参数就行~