CODEWITHSUNDEEP
htmlcss
zey
zey

Reputation: 6105

how to overlap two div in css?

I have two div likes , 

<div class="imageDiv"></div>
<div class="imageDiv"></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 ,

enter image description here

Upvotes: 34

Views: 158282

Answers (5)

Rab
Rab

Reputation: 35572

See demo here you need to introduce an additional class for the second div

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

Upvotes: 8

Junaid Asghar
Junaid Asghar

Reputation: 1

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

Upvotes: -1

Mi-Creativity
Mi-Creativity

Reputation: 9654

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

Upvotes: 1

dinodsaurus
dinodsaurus

Reputation: 5095

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

Upvotes: 1

btevfik
btevfik

Reputation: 3431

add to second div bottomDiv

and add this to css. 

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

http://jsfiddle.net/aw8RD/1/

Upvotes: 39

Related Questions