CODEWITHSUNDEEP
csshtmloverlap
Jens Törnell
Jens Törnell

Reputation: 24768

CSS - Overlapping divs

I have no code to start with.

I want to add 2 divs overlapping on each other and then use the new CSS3 Rotate function. The effect I want to create is shown on this page

Requirements

Have fun!

Upvotes: 3

Views: 14325

Answers (4)

Jens Törnell
Jens Törnell

Reputation: 24768

Here is what I came up with:

http://jsfiddle.net/2mLTf/

If the jsfiddle will not work in the future, here is the source:

CSS

#paper {
width: 570px;
min-height: 300px;
float: left;
background: #fff;
transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
z-index: 2;
-moz-box-shadow: 0 0 10px #DDD;
-webkit-box-shadow: 0 0 10px #CCC;
box-shadow: 0 0 10px #CCC;
border: 1px solid #DDD;
}

#page {
padding: 20px 0 20px 20px;
min-height: 500px;
background: white;
width: 560px;
margin: 0 auto;
float: left;
margin: 0px 0 20px -570px;
z-index: 3;
transform: rotate(0);
-moz-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
-moz-box-shadow: 0 0 10px #DDD;
-webkit-box-shadow: 0 0 10px #CCC;
box-shadow: 0 0 10px #CCC;
border: 1px solid #DDD;
}

#container {
padding: 20px 0 0 20px;
width: 590px;
margin: 0 auto;
overflow: hidden;
}

HTML

<div id="container">
<div id="paper"></div>
<div id="page"></div>
</div>

Upvotes: 4

Jens T&#246;rnell
Jens T&#246;rnell

Reputation: 24768

Thanks danixd! The code did not work but with some changes it did. Here is the result: http://www.devdevote.com/test/

The main "papers" are overlapped in the middle, works in all modern browsers except IE.

I might edit this answer later with a more clean solution of it.

Upvotes: 0

theorise
theorise

Reputation: 7425

I guess you could just use negative margins and z-index

#div1{width: 100px; height: 100px; float: left; z-index: 1;}
#div2{width: 100px; height: 100px; float: left; margin: 0 0 0 -50px; z-index: 2;}
#div3{width: 100px; height: 100px; float: left; margin: 0 0 0 -50px; z-index: 3;}

Upvotes: 1

Marks
Marks

Reputation: 3663

Altough you dont want to use images, you maybe should think about it. CSS3 is not supported by all browsers, and makes your page unuseable for a lot of potential users.

But, if you still want to do it, you would have to use position:absolute at least on the top div, otherwise you cant get one over the other. And then it should be easy to user the css3 roate on it.

Here is some help on rotation, so it would not only work for css3, but also for webkit and firefox 3.1+: http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html

Upvotes: 1

Related Questions