Overlapping elements in CSS

Question

Hello,

How can I make two elements overlap in CSS, e.g.

<div>Content 1</div>
<div>Content 2</div>

I would like the two contents (they can be anything) to overlap, so Content 2 is displayed starting at the same top left corner as Content 1 and they appear overlapped. Content 1 should begin in the normal flow of the document and not at some fixed position on the screen.

Is this possible?

Thanks,

AJ

Answer 1

the easiest way is to use position:absolute on both elements. You can absolutely position relative to the page, or you can absolutely position relative to a container div by setting the container div to position:relative

<div id="container" style="position:relative;">
    <div id="div1" style="position:absolute; top:0; left:0;"></div>
    <div id="div2" style="position:absolute; top:0; left:0;"></div>
</div>

Answer 2

I think you could get away with using relative positioning and then set the top/left positioning of the second DIV until you have it in the position desired.