且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-10-09 13:37:10

谢谢你所有的答案,虽然一切正确,没有真正解决我的问题。
我的解决方案是在未知长度的内容的末尾创建第二个不可见的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.