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

Question

这是我的布局的简化：

    <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 - 问题是如果我能做到这一点，我就不需要在第一名（或者我错过了这里的重点）。

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

Answer 1

您能否将 z-index 样式添加到这两个部分，以便您想要的部分显示在顶部？

Answer 2

您应该将z-index 设置为绝对定位的 div，该 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 设置 layers 在页面的depth 中定位。

或者您可以使用浮动来显示所有未知长度的文本。但在这种情况下，您不能绝对定位您的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>​

Answer 3

简答：仅使用 CSS 是无法做到的。

长（呃）答案：为什么？因为当您执行position: absolute; 时，您的元素会脱离文档的常规流程，因此不幸的是，文本无法与它有任何位置关系。

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

Answer 4

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

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

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

Answer 5

我的解决方案是在未知长度的内容的末尾创建第二个不可见的 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>

这似乎解决了问题。

Answer 6

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

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

Answer 7

对我有用的是在绝对定位的孩子之前的兄弟姐妹上使用 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>

Answer 8

<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 代码告诉我以下将其放入 CSS 表中：

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

所以我就这样做了

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

它也同样有效。

Answer 9

将文本放入一个新的 div。然后将该 div 也设为 position: absolute; 。此外，您可以为该 div 使用 overflow: hidden;。