CODEWITHSUNDEEP
cssposition
gadelat
gadelat

Reputation: 1470

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?

Simple example:

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

Upvotes: 9

Views: 8667

Answers (3)

leonheess
leonheess

Reputation: 21351

Parent:

position: relative;

Child:

position: absolute;
z-index: 2;
top: 100%;

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24703

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

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.

Upvotes: 4

Rishi Kulshreshtha
Rishi Kulshreshtha

Reputation: 1878

Since you've applied position:relative to your very first element either you've to specify the height or provide padding-bottom to it.

For instance, in your provided code I've applied height of 20px to it.

Note: Using height is better than using padding-bottom for this kind of scenario

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

Upvotes: 2

Related Questions