logo标签列表

阻止绝对定位的 div 与文本重叠

htmlcss
54

这是我的布局的简化版本：

    <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（或者我错过了什么）。有人能想到CSS解决方案吗？在我尝试jQuery之前。
2
请在 jsFiddle 上展示您的问题。我复制粘贴了您的示例（还将 .btn 添加了尺寸和背景），但长内容似乎没有“重叠”按钮 http://jsfiddle.net/gzSGM/ - Dmitry Pashkevich
10个回答
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>

这似乎解决了这个问题。

1
它是如何解决你所描述的问题的？你有没有漏掉一些代码？http://jsbin.com/vadiwakuvuzu/1/edit - tuff
17
两年后，我可以诚实地说我一点都不知道。 - SwiftD
没关系，我刚收到这个问题的通知，看来我是一个死链中的链接。 - tuff
太棒了，非常感谢！position:absolute; right:x; 的 div 有时候确实很具有挑战性。我希望我一个小时之前就看到了这个。 - Ian
14

简短回答：无法仅使用 CSS 实现。

更详细的回答：为什么呢？因为当你使用 position: absolute; 时，这将使您的元素从文档的常规流程中脱离出来，因此很遗憾，文本无法与其保持任何位置关系。

可能的替代方案之一是将您的 div 设置为 float: right;，但如果这无法实现您想要的效果，您将不得不使用 JavaScript/jQuery 或构思出更好的布局。

2
正如@Chris所说，浮动是最好的选择：.foo{ float: right; display: inline-block; } - Julio Marins
8
如果你正在使用未知大小的元素，并且想在它们或它们的兄弟元素上使用position: absolute，那么你不可避免地要处理重叠问题。通过设置绝对定位，你将从文档流中移除该元素，但你想要的行为是：该元素应被其兄弟元素推挤而不会重叠...也就是它应该流动！这两件事情是完全相反的。
你应该重新考虑你的布局。
也许你想让.btn元素相对于它之前的某个兄弟元素进行绝对定位，而不是相对于它们共同的父元素？那么，在你想要定位按钮的元素上设置position: relative，然后将按钮作为该元素的子元素。现在，你可以使用绝对定位并控制重叠。
我发现了这份文档，其中包含一些可视化内容，帮助我理解这个很棒的答案: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index - Pierre Ferry
7
1
抱歉，已经过去将近3年了，但是从堆叠上下文中移除元素如何将其添加到文档流中？ - clayRay
3

对于我有效的方法是在绝对定位的子元素之前的兄弟元素上使用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>
2

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

这应该是一条评论，但我还没有足够的声望。解决方案可行，但Visual Studio Code告诉我将其放入CSS样式表中时会出现以下问题：

由于浮动，inline-block被忽略。如果“float”具有除“none”以外的值，则框被浮动，“display”被视为“block”

所以我这样做了

最初的回答

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

最初的回答
而且它同样有效。
0

你能否为这两个部分添加z-index样式，以便你想要的那个显示在最上面？

0
我回复是因为我也看到了这篇文章，并找到了一个简单而有效的解决方案：绝对定位元素具有固定的位置和大小，所以您只需要在内容中添加右填充400像素（参考您的示例）即可。
0

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

就像这样

<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-index 设置页面中的 层级 位置。

或者您可以使用浮动来显示所有未知长度的文本。但在这种情况下，您无法绝对定位您的 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>​
我相信OP的意思是文本应该围绕着绝对定位的 div。 - Chris
哦，也许吧。我扩充一下我的答案。 - Nick Kugaevsky
-2
将文本放入一个新的 div 中。然后使该 div 也具有 position: absolute;。此外，您可以为该 div 使用 overflow: hidden;。
这样做不行，因为问题中提到文本长度未知。 - Harry Theo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接