2013-06-24 92 views
0

我能夠使一個div轉到窗口大小AKA的拉伸填充屏幕。現在我想知道其餘部分如何不相互重疊,以便我可以按順序滾動它們中的每一個,並在每個div中保留居中的文本?現在,它只是顯示的東西3.拉伸到窗口大小的多個div

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

我想實現: 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; 
} 

回答

2

你要麼有一些邏輯,我不明白或你希望全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/

+0

我怎樣才能讓它們不重疊呢? :D – lawx

+0

你究竟想要整個事情是什麼樣子? – Kaloyan

+0

檢查我的問題,我添加了一個圖像。 – lawx

1

您使用絕對定位和所有三個都有相同的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; 
} 
+0

那麼我應該使用哪種z-index?請編輯 – lawx

+0

我不知道你在努力達到什麼目的。隨着你的代碼的立場,只有一個可見,而另外兩個。 –

+0

我正在嘗試實現'其餘部分如何互不重疊,以便我可以依次滾動它們中的每一個。你能在小提琴中解釋嗎? – lawx

1

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

現在,每個div似乎比窗口稍高一點? – lawx

+0

http://jsfiddle.net/derekstory/592NY/3/對不起,現在..我想這就是你要找的。 –

+0

和居中的文字? :d – lawx