停止绝对定位的div与文本重叠
以下是我的布局的简化：
<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重叠。
我已经在网上搜索过了，所以我找到了一个解决方案，我找到的唯一一个建议是在绝对定位的div处放置一个不可见的div -问题是，如果我能做到这一点，我就不需要把绝对定位的div放在第一位(或者我错过了这一点)。
在我学习jquery之前，有人能想到一个css解决方案吗？
回答 7
Stack Overflow用户
发布于 2012-09-13 22:24:47
我的解决方案是在未知长度的内容的末尾创建第二个不可见的div，这个不可见的div的大小与我的绝对定位的div相同，这确保了在我的内容的末尾总是有一个空间用于绝对定位的div。
这里之前提供了这个答案：Prevent absolutely-positioned elements from overlapping with text，但是直到现在我还不知道如何将它应用于右下角的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>
这似乎解决了问题。
Stack Overflow用户
发布于 2012-09-11 02:31:20
如果您正在处理大小未知的元素，并且希望在这些元素或其同级元素上使用position: absolute，则不可避免地必须处理重叠问题。通过设置绝对位置，你从文档流中移除了元素，但你想要的行为是，你的元素应该被它的兄弟元素推来推去，这样就不会overlap...ie它应该流动！你在寻找两个完全矛盾的东西。
你应该重新考虑你的布局。
也许您想要的是.btn元素应该相对于它前面的兄弟元素之一进行绝对定位，而不是相对于它们共同的父元素？在这种情况下，您应该在要放置按钮的元素上设置position: relative，然后使按钮成为该元素的子元素。现在，您可以使用绝对定位和控件重叠。
Stack Overflow用户
发布于 2018-12-19 22:41:40
在绝对(或相对)定位的元素上放置-1的z-indez。
这将把它从堆叠上下文中拉出来。(我想。)在这里阅读更多关于“堆叠上下文”的精彩内容：https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
https://stackoverflow.com/questions/12357242
复制相似问题
腾讯云开发者
