how to overlap two div in css?

Question

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

you need to give them different class names and move one. maybe using position relative or css3 translate — btevfik, May 04 '13 at 08:01
Possible duplicate: **[CSS: Make two floating elements overlap](http://stackoverflow.com/questions/9227007/css-make-two-floating-elements-overlap)** — Siva Charan, May 04 '13 at 08:05
yes , have to make two class as `(.imgDivOne , .imgDivTwo )` :) Can you show me an example ? — zey, May 04 '13 at 08:06

score 38 · Accepted Answer · answered May 04 '13 at 08:03

38

add to second div bottomDiv

and add this to css.

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

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

answered May 04 '13 at 08:03

btevfik

3,391
3
27
39

Raab · Answer 2 · 2019-11-28T13:40:34.653

7

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

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

edited Nov 28 '19 at 13:40

answered May 04 '13 at 08:06

Raab

34,778
4
50
65

1

+1 , i edited likes > `top: -100px;position: relative;left: 150px;` – zey May 04 '13 at 08:13

score 1 · Answer 3 · answered May 04 '13 at 08:06

1

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

answered May 04 '13 at 08:06

dinodsaurus

4,937
4
19
24

Mi-Creativity · Answer 4 · 2013-05-04T08:22:30.030

1

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

edited May 04 '13 at 08:22

answered May 04 '13 at 08:13

Mi-Creativity

9,554
10
38
47

score -1 · Answer 5 · answered Jan 13 '22 at 03:38

-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

answered Jan 13 '22 at 03:38

Junaid Asghar

1
1
3

how to overlap two div in css?

5 Answers5

Linked

Related