43

这是我的布局的简化：

    <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 解决方案？

4

9 回答 9

40

我的解决方案是在未知长度的内容的末尾创建第二个不可见的 div，这个不可见的 div 与我的绝对定位的 div 大小相同，这样可以确保我的内容的末尾总是有一个空格绝对定位的 div。

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

这似乎可以解决问题。

于 2012-09-13T14:24:47.183 回答
12

简短的回答：没有办法只使用 CSS 来做到这一点。

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

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

于 2012-09-10T18:30:14.670 回答
7

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

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

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

于 2012-09-10T18:31:19.860 回答
6

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

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

于 2018-12-19T14:41:39.597 回答
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>
于 2019-02-02T16:15:00.177 回答
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代码告诉我以下将其放入css表中：

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

所以我这样做了

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

它也同样有效。

于 2019-06-04T21:27:42.960 回答
0

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

于 2012-09-10T18:24:42.523 回答
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>​
于 2012-09-10T18:26:23.473 回答
0

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

于 2021-10-28T09:44:54.690 回答