如何解决浏览器缩放时相对定位图片与H1文本重叠问题

你当前的问题根源在于用position: relative; top: -12em;把图片强行拉出正常文档流，导致缩放时和header里的h1无规则重叠。要保持图片顶部偏右的位置、让标题文本环绕且不覆盖其他内容，只需调整结构和样式，让图片回到正常流中用浮动实现布局：

修改步骤 #

1. 调整HTML结构：把#composting-machine移到header容器内，这样它的浮动能直接作用于标题文本，无需靠负定位强行上移。
2. 修正图片样式：移除position: relative和top: -12em，仅用float: right实现靠右布局，同时添加margin让图片和文本保持间距。
3. 包裹浮动元素：给header设置overflow: auto，确保它能包含浮动的图片，避免下方section内容错位。
4. 调整标题样式：去掉固定的width:70%，让标题文本自然环绕图片，缩放时自动换行。

修改后的完整代码 #

CSS代码

body {
    margin: 2.5em 5em 0; /* 简写margin，简化代码 */
}

header {
    overflow: auto; /* 解决浮动元素导致的容器高度塌陷 */
}

h1 {
    font-size: 3.5em;
    margin-top: 0.2em;
    margin-bottom: 0em;
    /* 移除固定宽度，让文本自动环绕图片 */
}

#composting-machine {
    width: 25em;
    float: right;
    margin-left: 1.5em; /* 图片与标题之间留间距 */
    margin-top: 0.2em; /* 与标题顶部对齐 */
}

HTML代码

<div class="overview-container">
    <header>
        <img src="https://picsum.photos/200/300" alt="Composting Machine" id="composting-machine">
        <img src="https://picsum.photos/200/300" alt="Manatzura Logo" id="logo">
        <h1>LIDA - COMPOSTING MADE EASY</h1>
    </header>
</div>
<section class="page1">
    <ul>
        <li>ODOUR FREE</li>
        <li>AUTOMATED</li>
        <li>FAST PROCESSING</li>
    </ul>
    <p>Designed for the kitchen, the in-vessel composting system, LIDA reduces kitchen food waste through an automated process. By providing optimal conditions for the microorganisms, LIDA improves the composting process drastically, cutting processing time to roughly a week and curing  time to a month. The result is high quality fertiliser that is nutritious for the soil.</p>
</section>

效果说明 #

• 图片回到正常文档流后，不会再和标题无规则重叠，缩放窗口时标题文本会自动环绕图片换行。
• header的overflow: auto确保容器能包裹住浮动的图片，下方section内容不会错位。
• 添加的margin让排版更美观，图片和文本之间保留合适的间距。

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