停止从重叠文本中绝对定位div [英] Stop absolutely positioned div from overlapping text

问题描述

这是我的布局简化：

 < div style =position：relative; width：600px; > 
< p>未知长度的内容< / p> 
< div>未知高度的内容< / div> 
< div class =btnstyle =position：absolute; right：0; bottom：0; width：200px; height：100px;>< / div> 
< / div> 
  

我遇到的问题是，如果text / unknown div内容太长，我已绝对定位div。

我已经搜索了网页和SO以获得解决方案，唯一一个我发现的建议将绝对定位的div放在一个无形div中 - 麻烦是if我可以这样做，我不需要有绝对定位的div（或者我错过了这一点）。

任何人都可以想到一个CSS解决方案之前，我jQuery的路线？

解决方案

谢谢你所有的答案，虽然一切正确，没有真正解决我的问题。
我的解决方案是在未知长度的内容的末尾创建第二个不可见的div，这个不可见的div与我绝对定位的div的大小相同，并且设置为向左浮动，这确保始终存在在我的内容结尾处为绝对定位的div的空间，以及空间可用的位置，它将位于左侧浮动内容的左侧。

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

新结构如下：

 < div style =position：relative; width：600px;> 
< p>未知长度的内容< / p> 
< div>未知高度的内容< / div> 
< div id =spacerstyle =width：200px; height：100px; float：left; display：inline-block>< / div> 
< div class =btnstyle =position：absolute; right：0; bottom：0; width：200px; height：100px;>< / div> 
< / div> 
  

这似乎解决了这个问题。

Here is a simplification of my layout:

<div style="position: relative; width:600px;">
    <p>Content of unknown length</p>
    <div>Content of unknown height</div>
    <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;"></div>
</div>

The problem I'm having is that if the text/unknown div content is too long it is overlapping my absolutely positioned div.

I have searched the web and SO for a solution and the only one I found suggested putting an invisible div where absolutely positioned div is - trouble is if I could do that I wouldn't need to have the absolutely positioned div in the first place (or am I missing the point here).

Can anyone think of a css solution before I go down the jquery route?

解决方案

Thank you for all your answers, Whilst all were correct, none actually solved my problem. The solution for me was to create a second invisible div at the end of the content of unknown length, this invisible div is the same size as my absolutely positioned div and is set to float left, this ensures that there is always a space at the end of my content for the absolutely positioned div and where room is available it will position along side left floated content.

This answer was previously provided here: Prevent absolutely-positioned elements from overlapping with text However I didn't see (until now) how to apply it to a bottom right positioned div.

New structure is as follows:

<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>

This seems to solve the issue.

这篇关于停止从重叠文本中绝对定位div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！