how to overlap two div in css?

I have two div likes ,

<div></div>
<div></div>

and css class ,

 .imageDiv { margin-left: 100px; background: #fff; display: block; width: 345px; height: 220px; padding: 10px; border-radius: 2px 2px 2px 2px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }

You can see the result Here :)

I want to overlap this two div likes ,

5 Answers

add to second div bottomDiv

and add this to css.

 .bottomDiv{ position:relative; bottom:150px; left:150px; }

See demo here you need to introduce an additiona calss for second div

.overlap{ top: -30px;
position: relative;
left: 30px;
}

I edited you fiddleyou just need to add z-index to the front element and position it accordingly.

check this fiddle , and if you want to move the overlapped div you set its position to absolute then change it's top and left values

Why don't you use just one div and then use pseudo element :: before or ::after and set position of that pseudo element to absolute then set top: 100px and left 100px