拉伸到窗口大小的多個div

Question

我能夠使一個div轉到窗口大小AKA的拉伸填充屏幕。現在我想知道其餘部分如何不相互重疊，以便我可以按順序滾動它們中的每一個，並在每個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中的順序出現（如果你在事物2之前移動事物3， 2將可見）。事物2目前位於事物1的頂部，事物3位於事物2的頂部。
正如我所說的3D，您可以使用firefox的3D視圖來查看發生了什麼。

更新：第二個div可以使用top: 100%，第三個可以使用top: 200%，即使在IE上它也可以工作。

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

Answer 2

您使用絕對定位和所有三個都有相同的z-索引，所以最後一個將出現在另外兩個之上。如果你減少第三項的z-索引，那麼第二個div將會在最前面。

頁面上的ID必須是唯一的，所以「文本」應該是一個類。

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

這是沒有必要指定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; 
}