9

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
5
  • I would use 'float', but if you have to use 'position', then you'll need javascript. Comment back if you want a javascript solution.
    – twinlakes
    Jul 27, 2013 at 14:31
  • 1
    Could you provide a real example? Maybe there is an alternative way. Why does the inner element need to be absolute?
    – nirazul
    Jul 27, 2013 at 14:35
  • Is there a reason you want the inner div absolutely positioned, but to have other elements respect it's positioning in the document flow?
    – thgaskell
    Jul 27, 2013 at 14:37
  • Here's a JSFiddle to play with. Jul 27, 2013 at 14:40
  • 1
    Question stays as it is. That means getting rid of overlapping with absolutely positioned elements without specifying height. Not to entirely replace it with different solution. If it's not possible to do this, say so. I will accept that answer if nobody will prove otherwise.
    – gadelat
    Jul 27, 2013 at 15:10

3 Answers 3

4

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.

1
  • I thought absolute positioning is supposed to take the element out of the flow of it's relatively positioned parent only, this is flawed concept.
    – gadelat
    Jul 27, 2013 at 14:59
2

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>
2
  • As I stated, I do not want to specify height.
    – gadelat
    Jul 27, 2013 at 14:59
  • For those that don't mind setting height, this did the trick for me +1 Feb 29, 2020 at 14:34
0

Parent:

position: relative;

Child:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.