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

Stop absolutely positioned div from overlapping text

提问by SwiftD

Here is a simplification of my layout:

这是我的布局的简化：

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

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

我遇到的问题是，如果文本/未知 div 内容太长，它会与我绝对定位的 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).

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

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

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

采纳答案by SwiftD

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.

感谢您的所有回答，虽然都是正确的，但没有一个真正解决了我的问题。我的解决方案是在未知长度的内容的末尾创建第二个不可见的 div，这个不可见的 div 与我绝对定位的 div 大小相同，并设置为向左浮动，这样可以确保始终有一个空格在我的绝对定位 div 内容的结尾以及有空间的地方，它将沿着左侧浮动内容定位。

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

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

这似乎解决了这个问题。

回答by Chris

Short answer:There's no way to do it using CSS only.

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

Long(er) answer:Why? Because when you do position: absolute;, that takes your element out of the document's regular flow, so there's no way for the text to have any positional-relationship with it, unfortunately.

长（er）回答：为什么？因为当您这样做时position: absolute;，这会将您的元素从文档的常规流中移除，因此不幸的是，文本无法与它有任何位置关系。

One of the possible alternatives is to float: right;your div, but if that doesn't achieve what you want, you'll have to use JavaScript/jQuery, or just come up with a better layout.

一种可能的替代方法是float: right;你的div，但如果这不能实现你想要的，你将不得不使用 JavaScript/jQuery，或者只是想出一个更好的布局。

回答by tuff

If you are working with elements of unknown size, and you want to use position: absoluteon them or their siblings, you're inevitably going to have to deal with overlap. By setting absolute position you're removing the element from the document flow, but the behaviour you want is that your element should be be pushed around by its siblings so as not to overlap...ie it should flow! You're seeking two totally contradictory things.

如果您正在处理未知大小的元素，并且想position: absolute在它们或它们的兄弟元素上使用，则不可避免地要处理重叠。通过设置绝对位置，您正在从文档流中删除元素，但您想要的行为是您的元素应该被其兄弟元素推动，以免重叠......即它应该流动！你在寻找两件完全矛盾的事情。

You should rethink your layout.

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

Perhaps what you want is that the .btnelement should be absolutely positioned with respect to one of its preceding siblings, rather than against their common parent? In that case, you should set position: relativeon the element you'd like to position the button against, and then make the button a child of that element. Now you can use absolute positioning and control overlap.

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

回答by Protector one

Put a z-indezof -1on your absolute (or relative) positioned element.

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

This will pull it out of the stacking context. (I think.) Read more wonderful things about "stacking contexts" here: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

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

回答by Kashif Nawaz

Thing which works for me is to use padding-bottom on the sibling just before the absolutely-positioned child. Like in your case, it will be like this:

对我有用的是在绝对定位的孩子之前在兄弟姐妹上使用 padding-bottom 。就像你的情况一样，它会是这样的：

<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 style="padding-bottom: 100px;">Content of unknown height</div>
    <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;background-color: red;"></div>
</div>

回答by Ole Goes

<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 should be a comment but I don't have enough reputation yet. The solution works, but visual studio code told me the following putting it into a css sheet:

这应该是一个评论，但我还没有足够的声誉。该解决方案有效，但 Visual Studio 代码告诉我以下将其放入 css 表：

inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'

由于浮动，内联块被忽略。如果 'float' 的值不是 'none'，则框是浮动的，并且 'display' 被视为 'block'

So I did it like this

所以我这样做了

.spacer {
    float: left;
    height: 20px;
    width: 200px;
}

And it works just as well.

它也能正常工作。

回答by Andrew Walters

Could you add z-index style to the two sections so that the one you want appears on top?

您可以在两个部分中添加 z-index 样式，以便您想要的一个出现在顶部吗？

回答by Nick Kugaevsky

You should set z-indexto absolutely positioned div that is greater than to relative div.

您应该设置z-index为大于相对 div 的绝对定位 div。

Something like that

类似的东西

<div style="position: relative; width:600px; z-index: 10;">
    <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; z-index: 20;"></div>
</div>

z-indexsets layerspositioning in depthof page.

z-index设置页面深度的图层定位。

Or you may use floating to show all text of unkown length. But in this case you could not absolutely position your div

或者您可以使用浮动来显示所有未知长度的文本。但在这种情况下，你不能绝对定位你的div

<div style="position: relative; width:600px;">
  <div class="btn" style="float: right; width: 200px; height: 100px;"></div>
  <p>Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length 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>?