0

divウィンドウサイズを一気に画面いっぱいに広げることができました。今、残りが互いに重ならないので、各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 3 つの div は同じ z-index を持っていますが、どれも不透明度が変更されていないので、HTML に表示される順序で表示されます (モノ 3 をモノ 2 の前に移動すると、モノ 2 が表示されます)。モノ 2 は現在、モノ 1 の「上」にあり、モノ 3 はモノ 2 の上にあります。
3D と述べたように、firefox の 3D ビューを使用して何が起こっているかを確認できます。

top: 100%更新: 2 番目の div と 3 番目の 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

絶対配置を使用しており、3 つすべてが同じ z インデックスを持っているため、最後の 1 つが他の 2 つの上に表示されます。3 番目の項目の z-index を減らすと、2 番目の 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;
}

DIVを指定する必要はありませんwidth: 100%。これがデフォルトの動作です。

これらの同様のボックスに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 に答える