如何将元素定位在相对定位的元素下方而不重叠? [英] How to position element below relative positioned element without overlapping?

问题描述

如果我在具有相对+绝对定位元素的元素后放置任何内容，则它们会重叠.如果指定高度，则不会执行此操作，但是由于相对定位的元素的内容是动态的，因此我不想执行此操作.如何在不指定高度的情况下消除重叠?

If I put anything after element with relative+absolute positioned elements, it overlaps. It does not do this if I specify height, but I do not want to do this as content of relatively positioned element is dynamic. How to get rid of overlapping without specifying height?

简单的例子:

<div style="position:relative">
    <div style="position:absolute;">
        blabla
    </div>
</div>
I WANT THIS BELOW

推荐答案

absolute定位将元素从结构流中移出.由于这个原因，它的存在被忽略了，这就是它的目的.如果需要将元素放置在左侧或右侧，请使用float

absolute positioning takes the element out of the flow of the structure. It's presence is ignored for this reason, it's what it's purpose is. If you need an element positioned left or right then use float

当浮动元素确保您清除div的底部时，可以保留布局

When floating elements ensure you clear the bottom of the div so then the layout is preserved

<div style="clear:both;"></div>

DEMO http://jsfiddle.net/kevinPHPkevin/uHuSF/

否则，需要使用其他方法来实现您的目标.

Otherwise a different approach is required to accomplish your goal.

这篇关于如何将元素定位在相对定位的元素下方而不重叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！