如何在绝对div嵌套在相对div内的文档流中定位div？ [英] How to position div within document flow after absolute div nested within relative div?
问题描述
给定以下HTML：
<！doctype html&
< html>
< body>
< span style =background-color：blue;>
这里有一些文字< br />
这里有一些文字< br />
这里有一些文字< br />
这里有一些文字< br />
< / span>
< div style =position：relative; background-color：lightblue; id =first>
< div style =position：absolute; left：180px; background-color：green; id =second>
这是一个绝对定位的div相对于页面的div。
< / div>
< / div>
< div style =background-color：red; id =last>现在位于后面。< / div>
< / body>
< / html>
（仅供说明用）。
有没有办法使文档的流程重置，使得id为'last'的div与文档的其余部分，在绝对定位的div（不在后面）之后出现。没有将它嵌入到具有ids'first'或'second'的div中。
我需要保持与此类似的一般布局。
任何想法或缺失的东西？
#first 使用css，使 #first 高于 #second 并强制 #last 从 #second 下方输出。这将是我能想到的最简单的方法。这有帮助吗？ Given the following 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>
(written for illustration purposes only).
Is there any way to make the flow of the document reset such that the div with id 'last' appears in flow with the rest of the document, after the absolutely positioned div (not behind). Without embedding it inside the divs with ids 'first' or 'second'.
I need to keep the general layout similar to this. But I don't want to have to use javascript to hackily position anything.
Any ideas or something I'm missing?
One way would be to add a height rule to #first using css, making #first taller than #second and forcing #last out from underneath #second. That would be the easiest way I can think of. Does this help?
这篇关于如何在绝对div嵌套在相对div内的文档流中定位div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
