拉伸到窗口大小的多个 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 视图来查看发生了什么。

更新：您可以将top: 100% 用于第二个 div，将top: 200% 用于第三个，令人惊讶的是，即使在 IE 上也可以使用。

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

Answer 2

http://jsfiddle.net/derekstory/592NY/2/

删除绝对索引和 z 索引，因为不需要重叠。

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

您正在使用绝对定位，并且所有三个具有相同的 z-index，因此最后一个将出现在其他两个之上。如果减少第三个项目的 z-index，那么第二个 div 现在将位于顶部。

Id 在页面上必须是唯一的，因此“text”应该是一个类。

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;
}

不必为 DIV 指定 width: 100%，这是它们的默认行为。

给这些相似的盒子一个class，然后使用它们的id为它们着色会更简洁：

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;
}