0

我能够使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;
}
4

3 回答 3

2

您要么有一些我不理解的逻辑，要么您希望完全 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/

于 2013-06-24T20:57:53.003 回答
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;
}
于 2013-06-24T21:01:13.380 回答
1

您正在使用绝对定位，并且所有三个具有相同的 z-index，因此最后一个将出现在其他两个之上。如果减少第三个项目的 z-index，那么第二个 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%为 DIV 指定，这是它们的默认行为。

给这些类似的盒子一个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;
}
于 2013-06-24T20:57:38.303 回答