0

画面には、オーバーレイで覆う必要のある要素が多数あります。要素はさまざまなサイズであり、ページの存続期間中にサイズ変更できます。

この CSS を使用して、必要な場所にオーバーレイを配置できましたが、100% の高さは機能しません。

.upgrade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

ある要素を別の要素を完全に覆うように設定する CSS の方法はありますか。CSS がオプションでない場合、私の代替計画は、jQuery/JavaScript を使用して初期の高さを設定し、サイズ変更イベントを追跡することです。それが正しい行動であることを願っています...

しかし、高さ 100% の問題は CSS で解決できればいいのにと思います。あなたの助けは大歓迎です!

4

1 に答える 1

4

HTML で、カバーする必要がある要素内に絶対位置の要素を配置します。次に、カバーする要素を作成しますposition: relative;。

その後、絶対配置要素の CSS を次のように変更します。

.upgrade {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

絶対配置された要素は、相対位置を持つ最も近い親に関連して配置されます。上、下、左、右は、ドキュメント全体ではなく、その要素に関連するため、要素全体をカバーする必要があります。

アップデート：

絶対位置の詳細については、MDNを参照してください。CSS-Tricks にも、このトピックに関する短い記事があります。

于 2012-11-28T13:10:33.723 に答える