Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overlapping elements in CSS

Tags:

css

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

like image 978
AJ. Avatar asked Jan 08 '10 12:01

AJ.


People also ask

How do you overlap elements in HTML?

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.


1 Answers

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> 
like image 118
fearofawhackplanet Avatar answered Oct 05 '22 01:10

fearofawhackplanet