html - 当其中有绝对定位时，如何让这些 div 正确堆叠？

Question

伙计...这里有很多人...这有点令人沮丧。我很少在这里发布问题，但当我这样做时，老实说，因为我花了数小时寻找解决方案，但出于某种原因，找不到解决方案。我认为这个社区的目的是帮助别人，而不是仅仅为了显示你的优越性。我已经阅读了太多线程，其中大多数评论和答案甚至与原始问题都不相关，我只是想知道为什么这么多时间花在抨击别人而不是试图提供帮助上？我来找你是因为我对 html 和 css 不是很熟悉，每次尝试我发现它只会把事情搞砸。这就是为什么我完整保留大部分代码的原因，因为当我在该部分中更改过多的内容时，它更改的变量比我预期的要多，我认为这可能会对建议的解决方案的可用性产生影响，所以我保留了大部分单独的代码。显然存在问题，是的，在这方面具有真正技能的人应该进行编辑，但这不就是我来这里的原因吗？因为我正在尝试利用我拥有的资源做我能做的事情并正在寻求专家的帮助？我只是不明白什么时候这个网站更多地是为了展示他人而不是帮助不幸的人。就像，一个人因为一些无关紧要的情况在高速公路上没油了，无论是因为他的仪表误报还是因为他不知道如何在车站使用泵，或者他只是健忘......随便，他正在寻求帮助，需要搭车或借电话给 friend 打电话，而你开车经过时靠近，减速并大喊，“你知道你真的应该让你的油箱加满 1/2!”或者“你的油漆看起来像垃圾!把它修好，然后我就会停下来!”

---

请大家查看，这是旧代码，我的任务是清理它，所以我真的很感激不要因为编码技术的问题而被打败......我只是想得到我问题的答案解决这个问题才能前进。我确实对此进行了研究，但由于不需要在图像上使用固定高度以及我需要外部 div 相对定位的事实......它创造了一个独特的场景，至少我认为。

---

我对如何让这些 div 正确堆叠感到困惑。我无法让主要内容 div(第 6 行)堆叠在具有/涉及绝对定位的第一个 div 下方(以便一个图像位于另一个图像之上)。

我还需要避免在图像上使用固定高度。因为我不希望它锁定在第二个 div 开始的位置。如果屏幕尺寸缩小，那么我希望图像按比例缩小。这可能吗？

这是我正在使用的代码:

https://jsfiddle.net/se5Le7w2/1/

我尝试在外部 div 上使用 position: relative，但它似乎没有达到我想要实现的目的。

  <div style="position: relative;">
    <div style="max-width: 975px; width: 100%;">
      <img style="position: absolute; z-index: 102; max-width: 975px; width: 100%;" src="http://www.pegaweb.com/tutorials/web-page-header/5.gif">
      <img style="position: absolute; z-index: 103; margin-left: 40px; margin-top: 20px;" src="data:image/jpeg;base64,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">
    </div>
    <div style="position: relative; width: 100%;">
      <table style="width: 100%; max-width: 975px;" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <p style="text-align: justify; font-size: 11px; line-height: 14px; margin: 0px 0px 14px; padding: 0px; color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">
              1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices justo justo, ac consequat arcu pellentesque id. Nulla hendrerit dui vitae neque venenatis consequat. Morbi justo eros, dictum et enim et, pellentesque fermentum augue. Aliquam
              non sapien eros. Sed auctor enim ac blandit rhoncus. Vivamus condimentum ex nulla, quis laoreet risus sodales quis. Vivamus interdum aliquam ultricies. Donec consectetur turpis et vehicula hendrerit. Fusce ac dui nec odio convallis malesuada
              id ultricies lectus.
            </p>
            <p style="text-align: justify; font-size: 11px; line-height: 14px; margin: 0px 0px 14px; padding: 0px; color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">
              2. Nam mi enim, bibendum id porttitor quis, posuere ac arcu. Donec pulvinar enim nec gravida accumsan. Fusce enim risus, laoreet nec venenatis aliquam, feugiat a sapien. Aenean vulputate fermentum ex, at cursus diam cursus vel. Vivamus maximus velit mi,
              ut auctor libero hendrerit ut. Donec vel pharetra nulla. Aenean imperdiet elementum felis vel finibus. Aenean eu luctus velit, nec accumsan velit.
            </p>
            <p style="text-align: justify; font-size: 11px; line-height: 14px; margin: 0px 0px 14px; padding: 0px; color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">
              3. Nullam pharetra orci nec lacinia bibendum. Ut tortor dolor, feugiat sed nulla ac, ultricies vehicula mi. Donec in arcu tincidunt, convallis lectus eu, ornare eros. Duis mollis ultrices lacus vulputate iaculis. Quisque urna lorem, consectetur in sollicitudin
              ut, volutpat et ex. Integer finibus malesuada ipsum, eget consequat nulla interdum et. Maecenas ullamcorper ante turpis, vitae mattis libero ultricies a. Duis bibendum sapien vitae molestie interdum.
            </p>
            <p style="text-align: justify; font-size: 11px; line-height: 14px; margin: 0px 0px 14px; padding: 0px; color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">
              4. Vestibulum cursus ipsum augue, eget consequat dui ullamcorper sed. Phasellus a ligula eu tellus posuere tristique quis eu odio. Nullam id est in orci pharetra tempus sed dictum sem. Phasellus vehicula iaculis augue ac scelerisque. Sed pretium eros
              sed tortor condimentum viverra. Quisque euismod sed ante eu facilisis. Quisque rhoncus auctor arcu at aliquet. Pellentesque eleifend leo at nisl fringilla sagittis. Sed augue erat, faucibus a nulla at, porttitor volutpat dui.
            </p>
            <p style="text-align: justify; font-size: 11px; line-height: 14px; margin: 0px 0px 14px; padding: 0px; color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">
              5. Maecenas semper erat euismod, ultricies augue et, aliquam ipsum. Sed commodo diam a posuere tristique. Vestibulum placerat risus orci, vitae finibus libero vulputate sed. Vestibulum ac nulla maximus, lobortis turpis interdum, tempor lectus. Fusce pretium
              scelerisque viverra. Vestibulum aliquam at ex eget sollicitudin. Proin in vehicula velit. Nam eget metus sed dui lobortis pulvinar sit amet sed tortor. Aliquam eu nunc a tortor ultricies euismod.
            </p>
          </td>

        </tr>
        <tr>
          <td>

            <img src="http://www.pegaweb.com/tutorials/web-page-header/5.gif" class="footer" style="width: 100%; max-width: 975px; position: relative; cursor: pointer;">
          </td>
        </tr>
      </table>
    </div>
  </div>

Answer 1

我会评论而不是回答，但我的声誉还不够高。

您嵌套了过多不必要的元素。 table 元素不应用于布局页面。仅在需要时使用 div。对于我在你的 fiddle 中看到的，你只需要几个 div，也许只需要 2 个。

此外，不推荐使用内联 CSS。使用外部文件。

我知道这不是你要找的答案，但事情就是这样，只要你有这种不必要的复杂性，就没有人会试图帮助你。