停止绝对定位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解决方案吗？

Answer 1

谢谢你的所有答案,虽然一切都是正确的,但实际上没有人解决我的问题.我的解决方案是在未知长度内容的末尾创建第二个不可见的div,这个不可见的div与我绝对定位的div的大小相同,并设置为向左浮动,这确保了总是有空间绝对定位的div的内容结束,如果有空间,它将沿左侧浮动内容定位.

此答案之前已提供: 防止绝对定位的元素与文本重叠 但是我没有看到(直到现在)如何将它应用于右下角的div.

新结构如下:

<div style="position: relative; width:600px;">
        <p>Content of unknown length</p>
        <div>Content of unknown height</div>
        <div id="spacer" style="width: 200px; height: 100px; float:left; display:inline-block"></div>
        <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;"></div>
    </div>

这似乎解决了这个问题.

Answer 2

简短的回答:没有办法只使用CSS.

长(呃)回答:为什么？因为当你这样做时position: absolute;,它会使你的元素脱离文档的常规流,所以不幸的是文本没有办法与它有任何位置关系.

其中一个可能的替代方案是float: right;你的div,但如果这不能达到你想要的,你将不得不使用JavaScript/jQuery,或者只是想出一个更好的布局.

Answer 3

如果您正在使用未知大小的元素,并且想要position: absolute对它们或它们的兄弟姐妹使用,那么您将不可避免地要处理重叠.通过设置绝对位置,您将从文档流中删除元素,但您想要的行为是您的元素应该被其兄弟姐妹推动,以免重叠...即它应该流动!你正在寻找两个完全相互矛盾的东西.

你应该重新考虑你的布局.

也许你想要的是.btn元素应该相对于其前一个兄弟姐妹而不是他们的共同父母绝对定位？在这种情况下,您应该设置position: relative您想要按下按钮的元素,然后使该按钮成为该元素的子元素.现在您可以使用绝对定位和控制重叠.

Answer 4

放z-indez的-1你绝对（或相对）定位的元素上。

这会将它从堆叠上下文中拉出来。（我认为。）在此处阅读有关“堆叠上下文”的更多精彩内容：https : //philipwalton.com/articles/what-no-one-told-you-about-z-index/