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
You can apply the CSS position:relative; and then specify an offset such as top:-50px;left:-20px; which would shift the element 20 pixels to the left and 50 pixels up. You can also specify right and bottom and use positive or negative values.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With