Question

我能够让一个div转到窗口大小的AKA填充屏幕。现在我想知道其余部分是如何不相互重叠的，所以我可以按顺序滚动每个部分，同时保留每个div中的居中文本？现在，它只显示第3项。

我想要实现的目标： demo

以下是带注释的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中出现的顺序出现（如果你在事物2之前移动事物3，则事物2将是可见的）。事2的东西2在东西1的“最上面”，东西2在东西2的上面。
正如我所说的3D，您可以使用firefox的3D视图来查看正在发生的事情。

更新：您可以将top: 100%用于第二个div，将top: 200%用于第三个div，这甚至可以在IE上使用。

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

Answer 2

您正在使用绝对定位，并且所有三个都具有相同的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%，这是他们的默认行为。

为这些类似的框提供类，然后使用其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;
}

Answer 3

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

多个Div，可以拉伸到窗口大小

3 个答案: