多个伸展到窗口大小的div [英] Multiple Divs that Stretch to size of window

问题描述

我能够使一个 div 去到窗口大小AKA填充屏幕的伸展。现在我想知道如何休息不相互重叠，所以我可以滚动每个他们顺序，保留每个div中的中心文本吗？现在，它只显示第3条。

I was able to make one div go to the stretch of the window size AKA fill the screen. Now I'm wondering how the rest don't overlap each other so I can scroll through each of them in order, retaining the centered text in each div as well? Right now, it's only displaying thing 3.

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

What I am trying to achieve:

Here is the annotated 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;
}

解决方案

You either have some logic I don't understand or you wish to go full 3D :D The three divs have same z-index, none of them has it's opacity modified soo they'll simply appear in the order they appear in the HTML (if you move thing 3 before thing 2, thing 2 will be visible). Thing 2 is currently "on top" of thing 1 and thing 3 is on top of thing 2.
As I said 3D , you can use firefox's 3D view to see what's happening.

Update: you can use top: 100% for the second div and top: 200% for the third, which surprisingly seems to work even on IE.

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

这篇关于多个伸展到窗口大小的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！