-2

实现页面布局的一种相当常见的技术是将绝对定位的 div 包装在相对定位的 div 中，以使绝对 div“相对绝对” 。到目前为止没有问题。但是，正如我刚刚发现的那样，这会导致放置以下内容时出现问题相对定位的 div - 除非我给相对 div 一个高度。

我使用相对绝对值已经有一段时间了，并且一直认为它们是一种完全合法的 CSS3 技术，但我现在开始怀疑它到底是不是太 hacky。如果是这种情况，那么将 div 绝对相对于容器定位并且让文档内容跟随容器正确流动（即出现在容器下方？）的合法方式是什么？

我应该提到这里的上下文是现代浏览器——那些与 CSS3 和 HTML5 没有问题的浏览器。如果有一个可行的解决方案，我很想听听。

此处按顺序显示编辑。这是有问题的标记

<div id='boxrel' style='position:relative'>
 <div style='position:absolute;height:100%'>
  <div id="boxscroll">
  Lorem ipsum ...
  </div>
 </div>
</div>
<div id='afterbox'>
This div, id = afterbox, should appear BELOW boxrel but does not
</div>

这里的完整上下文是

  • 我正在使用 jQuery Mobile v 1.3 + jQuery v 1.8.2（不去 v 1.9 的充分理由）
  • 我正在尝试使用nicescroll，我发现它是一个编写得很好的 jQuery 插件，用于创建滚动内容。
  • 为了使 nicescroll 工作，我需要将可滚动内容放在绝对定位的 div 中。
  • 而这反过来又要求我使该 div 相对绝对，否则......
  • 结果是 afterbox 看起来好像 boxrel 不存在。
  • 解决此问题的唯一方法是给 boxrel 一个高度，但我无法做到这一点

我希望这能让问题更清楚。

4

5 回答 5

1

您遇到的问题不是黑客攻击，而是absolute定位的工作方式。您遇到的问题是由两件事引起的：

  1. #boxrel是一个块容器，这意味着默认情况下它将在其中包含其他块级框。内容将以垂直方式按预期流动，除非它的一些内容被从正常流动中取出并放入另一个上下文中，这导致我们第 2 点......
  2. 您未命名div的 withstyle = "position: absolute"创建了一个新的块格式化上下文，该上下文适用于自身及其后代元素。

因此，如果你想让你的#afterboxdiv 出现在下面#boxscroll，你必须简单地将它包含在由divwith创建的块格式化上下文中position: absolute。

这是 jsFiddle 上的一个示例。

有关绝对定位的更多信息。

于 2013-06-05T14:07:06.003 回答
1

如果您希望容器占用空间，请为其指定高度：

<div id='boxrel' style='position:relative; height:200px'>
 <div style='position:absolute;height:100%'>
  <div id="boxscroll">
  Lorem ipsum ...
  </div>
 </div>
</div>
<div id='afterbox'>
This div, id = afterbox, should appear BELOW boxrel but does not
</div>
于 2013-06-05T13:55:25.703 回答
0

我经常遇到这个问题。我通常的解决方案是clear在我的 css 中调用一个类（在我使用这个类的所有 Web 项目中），当我遇到这个问题时，我只需添加clear到新的相对定位的 div 的类中，我需要出现在之前的相对位置下方定位的 div。该类clear仅包含：

clear:both;

所以，我afterbox看起来像这样：

<div id='afterbox' class='clear'>
于 2013-06-05T14:23:51.593 回答
0

这里可能有点混乱，您所描述的是正确的行为，它也不是 CSS3 的一部分（它一直是规范的一部分），除非被滥用，否则也不是真正的“hacky”。

当您position:absolute使用一个元素时，浏览器会将该元素完全从文档流中取出，并将其放置在您指定的位置（相对于最近的position: relative父级）。

这意味着它下面的文档流中的任何元素都会表现得好像它不存在一样。

尝试阅读A List Apart 上的这篇文章，这是一本很棒的书，而且信息量很大！

如果您能够在此处发布预览链接或 Fiddle 成员可能会为您提供进一步的帮助。

于 2013-06-05T13:52:38.520 回答
-1

I'd ditch the relative/absolute dance altogether - CSS Flexbox is what the doctor ordered, more details here: http://css-tricks.com/using-flexbox/ Setting your inner content to flex 1 will cause it to expand to the size of the parent that has flex display applied to it. The minimum height of the parent, unless you set it to something else, will be the natural size of the inner content's height.

This is what your CSS would look like:

.outer-container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.inner-content  {
  height: 100%;
  -webkit-box-flex: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;      /* OLD - Firefox 19- */
  -webkit-flex: 1;       /* Chrome */
  -ms-flex: 1;           /* IE 10 */
  flex: 1;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
于 2013-06-05T13:51:39.053 回答