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中 - 麻烦的是如果我能做到这一点我不需要在绝对定位的div中第一名（或者我错过了这里的观点）。

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

Answer 1

感谢您的所有答案，虽然一切都是正确的，但实际上没有人解决我的问题。我的解决方案是在未知长度内容的末尾创建第二个不可见的div，这个不可见的div与我绝对定位的div的大小相同，并设置为向左浮动，这确保了总是有空间对于绝对定位的div，我的内容结束，如果有空间，它将沿左侧浮动的内容定位。

此答案之前已提供： Prevent absolutely-positioned elements from overlapping with text 但是我没有看到（直到现在）如何将它应用到右下角的div。

新结构如下：

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

这似乎解决了这个问题。

Answer 2

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

长（呃）回答：为什么？因为当你执行position: absolute;时，会将你的元素从文档的常规流中取出，所以不幸的是文本没有办法与它有任何位置关系。

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

Answer 3

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

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

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

Answer 4

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

                <textarea placeholder="entry girebilmek için giriş yapmanız gerekiyor." class="pb-cmnt-textarea" disabled></textarea>

Answer 5

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

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

Answer 7

您应该将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将图层设置在页面的深度中。

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

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

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

停止绝对定位div与重叠文本

8 个答案: