css - 拉伸(stretch)到窗口大小的多个 Div

Question

我能够让一个 div 延伸到窗口大小，也就是填满屏幕。现在我想知道其余部分如何不相互重叠，以便我可以按顺序滚动浏览每个部分，同时保留每个 div 中的居中文本？现在，它只显示事物 3。

http://jsfiddle.net/592NY/1/

我想要达到的目标:

这是带注释的 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

要么你有一些我不明白的逻辑，要么你想要全 3D :D 这三个 div 具有相同的 z-index，它们都没有修改不透明度，因此它们将简单地按照它们在 HTML 中出现的顺序出现(如果您将事物 3 移动到事物 2 之前，事物 2 将可见)。事物 2 目前在事物 1 的“顶部”，事物 3 在事物 2 的顶部。
正如我所说的 3D，您可以使用 firefox 的 3D View 来查看发生了什么。

更新:您可以使用 top: 100%对于第二个 div 和 top: 200%对于第三个，令人惊讶的是，它甚至在 IE 上也能正常工作。

http://jsfiddle.net/592NY/4/