Multiple Divs that Stretch to size of window - css

Question

I was able to make one div go to the stretch of the window size AKA fill the screen. Now I'm wondering how the rest don't overlap each other so I can scroll through each of them in order, retaining the centered text in each div as well? Right now, it's only displaying thing 3.
http://jsfiddle.net/592NY/1/
What I am trying to achieve:
Here is the annotated CSS:
/* Each of the divs and their independent backgrounds */
#thing1 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background: blue;
}
#thing2 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background: red;
}
#thing3 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background: green;
}
/* Centering the text */
#text {
width: 100px;
height: 100px;
margin: auto;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}

Answer 1

You either have some logic I don't understand or you wish to go full 3D :D
The three divs have same z-index, none of them has it's opacity modified soo they'll simply appear in the order they appear in the HTML (if you move thing 3 before thing 2, thing 2 will be visible). Thing 2 is currently "on top" of thing 1 and thing 3 is on top of thing 2.
As I said 3D , you can use firefox's 3D view to see what's happening.
Update: you can use top: 100% for the second div and top: 200% for the third, which surprisingly seems to work even on IE.
http://jsfiddle.net/592NY/4/

Answer 2

http://jsfiddle.net/derekstory/592NY/2/
Remove the absolute and z index since overlapping is not desired.
html, body {
height: 100%;
}
#thing1 {
top:0;
left:0;
width:100%;
height:100%;
background: blue;
}
#thing2 {
top:0;
left:0;
width:100%;
height:100%;
background: red;
}
#thing3 {
top:0;
left:0;
width:100%;
height:100%;
background: green;
}
#text {
width: 100px;
height: 100px;
margin: auto;
top:0;
bottom: 0;
left: 0;
right: 0;
}

Answer 3

You are using absolute positioning and all three have the same z-index, so the last one will appear on top of the other two. If you reduce the z-index of the third item, then the second div will now be on top.
Ids must be unique on the page, so "text" should be a class.
http://jsfiddle.net/andrewgsw/592NY/5/
body, html {
height: 100%;
}
#thing1 {
position: relative;
height: 100%;
background: blue;
}
#thing2 {
position: relative;
height: 100%;
background: red;
}
#thing3 {
position: relative;
height: 100%;
background: green;
}
.text {
width: 100px;
height: 100px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
It is not necessary to specify width: 100% for DIVs, this is their default behaviour.
It is much neater to give these similar boxes a class, then colour them using their ids:
http://jsfiddle.net/andrewgsw/sMSPa/2/
body, html {
height: 100%;
margin: 0; padding: 0;
}
.things {
position: relative;
height: 100%;
}
#thing1 {
background: blue;
}
#thing2 {
background: red;
}
#thing3 {
background: green;
}
.text {
width: 100px;
height: 100px;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}