絶対的に配置されたコンテンツの重複

StackOverflow https://stackoverflow.com/questions/1290877

  •  18-09-2019
  •  | 
  •  

質問

少し問題があります このページ. 。ほぼ正しく動作しています。

赤いボックスがウィンドウの中央 (h&v) に配置されている必要があります。作品。

黄色のボックスがウィンドウの下部に貼り付けられている必要があります。作品。

ウィンドウの高さが 400 ピクセル未満の場合は、スクロール バーが表示され、スクロール領域の下部に黄色のボックスが表示されます。 基本的に、黄色のボックスが赤いボックスの上に表示されることは望ましくありません。また、その逆も同様です。機能しない

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

ありがとう。

役に立ちましたか？

解決

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

height: 100%;
position: relative;

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

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

他のヒント

#footer{z-index: 1000;}
#logo{z-index: 1001;}

z-index が必要です。1000 は少し多すぎますが、単純です 

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

うまくいくだろう

特定せずに覚えておくと便利です 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 より高くなること。

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

#wrapper {
min-width: 400px;
min-height: 400px;
overflow: scroll; /* or overflow: auto */
}

Z インデックスはここでは重要ではありません。Z-Index では要素の重なりが引き続き許可されます。Z インデックスはどの要素が一番上にあるかを決定するだけです。

使う 浮くドキュメント フロー内の red div の後に ing 要素を追加し、その後で クリア 黄色の部分をクリックして、要素間の関係を作成します (つまり、黄色の div は クリア 赤は重なりません）。

比較的サイズの大きな要素を挟み込む（例: 身長：100%) を 2 つの間に配置すると、黄色の div が画面の一番下に押し出されますが、垂直方向に正しく配置するのは難しい場合があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top