Positioning required when I shouldn't have to

HTML & CSS
1

I have some overlayed divs that are positioned using “Position: relative; top: -NN;”. The problem is that it creates a gap before the following divs by the same amount as -NN.

This requires me to use the same positioning technique on the following divs. That seems like it should be unnecessary. To make matters worse, there is a large gap before the template footer, which I can’t fix the same way.

I tried nesting the positioned divs in another div, but that had no effect. Can someone please let me know what I’m doing wrong?

Thanks - Steve

2

The relative position is not moving the physical div, only the visual appearance of it.

But if you apply a negative top margin instead, the div will move. (With some exception. :))

3

Thanks Erik. Changing to negative margins also produced unexpected results. The top div was pushed up to overlap with the header. I solved it by using a negative bottom margin on the last div to pull the footer up.