Question

给出以下HTML：

<!doctype html>
<html>
<body>

<span style="background-color: blue;">
   Some text here <br />
   Some text here <br />
   Some text here <br />
   Some text here <br />
</span>

<div style="position: relative; background-color: lightblue;" id="first">
   <div style="position: absolute; left: 180px; background-color: green;" id="second">
      This is an absolutely positioned div within a div relative to the page.
   </div>
</div>

<div style="background-color: red;" id="last">This is now positioned behind.</div>

</body>

</html>

（仅供参考）。

是否有任何方法可以重置文档的流程，使得id为'last'的div与文档的其余部分一起出现在绝对定位的div之后（不在后面）。不用ids'first'或'second'将它嵌入div中。

我需要保持与此类似的总体布局。但是我不想使用javascript来定位任何东西。

我遗失的任何想法或事物？

Answer 1

一种方法是使用css向height添加#first规则，使#first高于#second并强制#last从#second下方{{1}} 1}}。这将是我能想到的最简单的方法。这有帮助吗？

Answer 2

首先 - 为什么#second需要绝对定位？

为了维护文档流，你应该在#first和#second上都有一个height属性，并确保#first的高度大于或等于#second的高度

Answer 3

在回答在内容可变（因而是可变高度）的div之后定位某些内容的问题时，我使用以下代码将我的控件div放在可变高度的中间div之后。我不会认为这是一个“黑客”，因为浏览器在加载时并不知道中间div有多高。

    $('#middleDiv')
    .load(dynamicContent, function () {
        $('#controls')
        .css('top', $('article').height() - ($('#controls').height()) / 2);
    });

$（＆＃39;＃middleDiv＆＃39;）。load（xxx）动态加载我要在页面上显示的HTML代码段。由于加载是异步的，我有一个完成匿名函数来计算控件div的顶部。在动态HTML中我有一个文章元素，我可以用它来计算动态内容的高度 - $（＆＃39; article＆＃39;）。height。

计算的第二部分减去控件高度的一半，使其位于我的内容之下。

CSS必须使用相对定位才能工作：

#controls {
    position:relative;
    left:376px;
    width:100px;
}

#nextExercise {
    height:45px;
    margin-bottom:20px;
    width:100%;
}

此页面上的控件很简单，只需一个按钮。我添加了一个底部边距，以便在控件之后留下一些空格。

我碰巧使用了文章元素本身的绝对位置，虽然我确信它也适用于某个位置：相对元素。

article {
    position:absolute;
    top:65px;
    left:145px;
    width:480px;
}

Answer 4

#last元素实际上并不在#first之后。它低于它，但#first高度为0，因为它的唯一子项是通过绝对定位从文档流中拉出来的。

不同的方法会满足您的需求吗？

#second的左边距为180px，然后使用display：inline-block使其适合其内容。
#second可以是position：relative而不是absolute，然后使用display：inline-block使其适合其内容。

以下是几个例子：http://codepen.io/Ghodmode/pen/diqcD

你没有准确地解释你需要做什么，或者为什么#second需要绝对定位。我们或许能够通过更多信息提供更好的解决方案。

如何在绝对div嵌套在相对div之后将div放在文档流中？

4 个答案: