如何阻止图像与相对位置重叠的文本

Question

我已将图像放置在页面顶部和某些文本的右侧，但是当我调整浏览器大小时，图像（堆肥机）与 H1 文本重叠，即使它不与其他文本重叠。如何解决此问题并确保在调整浏览器大小时标题文本环绕图像，同时将图像保持在相同位置？顺便说一句，我是 CSS 的初学者，所以在解释时请记住:)

这是我的代码：

body {
    margin: 2.5em;
    margin-left: 5em;
    margin-right: 5em;
    margin-bottom: 0em;
}

h1 {
    font-size: 3.5em;
    margin-top: 0.2em;
    margin-bottom: 0em;
    width: 70%;
}

#composting-machine {
    display: inline-block;
    width: 25em;
    float: right;
    position: relative; top: -12em;
}

<div class="overview-container"><header>
        <img src="https://picsum.photos/200/300" alt="Manatzura Logo" id="logo">
        <h1>LIDA - COMPOSTING MADE EASY</h1>
    </header></div>
    <section class="page1">
        <img src="https://picsum.photos/200/300" alt="Composting Machine" id="composting-machine">
        <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>

Answer 1

为了达到预期的结果，首先将整个文本包裹在一个

div

中。现在你的代码应该看起来像这样：

<div>
   <h1>Your Heading</h1>
      <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>
 </div>
 <img src="https://picsum.photos/200/300" alt="Composting Machine" id="composting-machine">

现在从 css 中删除

position:relative

    #composting-machine {
      display: inline-block;
      width: 25em;
      float: right;
  }      

希望这有帮助... 记得点赞:)