从重叠文本中停止绝对定位的 div

Question

这是我的布局的简化：

     <div style="position: relative; width:600px;">
        <p>Content of unknown length, but quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite long</p>
        <div>Content of unknown height</div>
        <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;background-color: red;"></div>
    </div>

我遇到的问题是，如果文本/未知的 div 内容太长，它就会与我绝对定位的 div 重叠。

我已经在网上和 SO 上搜索了一个解决方案，我发现的唯一一个建议是在绝对定位的 div 所在的位置放置一个不可见的 div - 问题是如果我能做到这一点，我就不需要首先拥有绝对定位的 div（还是我错过了这里的重点）。

在我走 jquery 路线之前，有人能想到一个 css 解决方案吗？

原文由 SwiftD 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我的解决方案是在未知长度的内容末尾创建第二个不可见的 div，这个不可见的 div 与我的绝对定位的 div 大小相同，这确保了我的内容末尾始终有一个空间用于绝对定位的div。

这个答案以前在这里提供： 防止绝对定位的元素与文本重叠 但是我没有看到（直到现在）如何将它应用于右下角定位的 div。

新结构如下：

 <div id="outer" style="position: relative; width:450px; background-color:yellow;">
        <p>Content of unknown length</p>
        <div>Content of unknown height </div>
        <div id="spacer" style="width: 200px; height: 25px; margin-right:0px;"></div>
        <div style="position: absolute; right: 0; bottom: 0px; width: 200px; height: 20px; background-color:red;">bottom right</div>
    </div>

这似乎解决了这个问题。

原文由 SwiftD 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

简短回答： 仅使用 CSS 无法做到这一点。

长（呃）回答： 为什么？因为当您执行 position: absolute; 时，这会使您的元素脱离文档的常规流程，因此不幸的是，文本无法与它有任何位置关系。

一种可能的选择是 float: right; 你的 div ，但如果这不能达到你想要的效果，你将不得不使用 JavaScript/jQuery，或者只是想出一个更好的布局。

原文由 Chris 发布，翻译遵循 CC BY-SA 3.0 许可协议