2

このページには少し問題があります。ほとんど正しく動作しています。

赤いボックスは、ウィンドウの中央 (h&v) に配置する必要があります。動作します。

黄色のボックスは、ウィンドウの下部に貼り付ける必要があります。動作します。

ウィンドウが 400 ピクセル未満の場合、高さのスクロール バーが表示され、スクロール領域の下部に黄色のボックスが表示されます。基本的に、黄色のボックスが赤いボックスの上に表示されることは決してありません。動作しません

どうすればこれを達成できるか知っている人はいますか？

ありがとう。

4

5 に答える 5

2

これを の CSS に追加し#wrapperます。

height: 100%;
position: relative;

これが機能する理由は、絶対配置された要素がビューポートに対して相対的に配置されているためです。これは、ブロックを含む他の要素がないためです。position: relativeに#wrapper(またはさらに言えば ) を追加bodyすることで、含まれているブロックが本文全体のコンテンツになるようにします。

はheight: 100%、含まれているブロックが少なくともビューポートの下部に到達することを確認するためにのみ必要です。

于 2009-08-17T23:06:17.213 に答える
1 
#footer{z-index: 1000;}
#logo{z-index: 1001;}
于 2009-08-17T22:42:04.953 に答える
0

ここでは、Z-Index は要因ではありません。Z-Index は要素のオーバーラップを引き続き許可します - どの要素が一番上にあるかを指示するだけです。

ドキュメント フローの赤い div の後に浮動要素を使用し、次に要素間の関係を作成するために黄色でclearを使用します (つまり、黄色の div は赤をクリアし、重なりません)。

比較的大きなサイズの要素 (例: height: 100% ) を 2 つの間に挟むと、黄色の div が画面の下部に押し出されますが、垂直方向に適切に配置するのは難しい場合があります。

于 2009-08-17T23:08:25.120 に答える
0

z-indexを指定しないと、要素は z オーダーで「最も高い」最新の要素と積み重なることを覚えておくと便利です。したがって、指定を避けたい場合はz-index、html を逆にします。

<body>


    <div id="wrapper">

        <div id="footer">

            This is the footer. It should always appear at the bottom of the page, but not over the red box.            

        </div>

        <div id="logo">
            <h1>Logo</h1>
        </div>

    </div>

</body>

それ以外の場合は、他の回答が示唆するように、よりも大きい数値を指定すると、より#logo高く#footerなり#logoます。

ビューポート ウィンドウが 400px 未満の場合にスクロールバーを強制するには、

#wrapper {
min-width: 400px;
min-height: 400px;
overflow: scroll; /* or overflow: auto */
}
于 2009-08-17T23:01:52.870 に答える
0

z-index が必要です。1000は少し過剰ですが、単純です

#footer{ z-index:2; }
#logo{ z-index:3; }

トリックをするだろう

于 2009-08-17T22:48:05.833 に答える