CSS を使用して要素を前面に移動する
要素が表示領域全体をカバーするように設定されていない場合、z-index プロパティを使用して要素を前面に表示できます。 z-index プロパティは、ページ上の要素の重なり順を決定します。
z-index が高い要素は、z-index が低いパーツのふたに積み重ねられます。
CSS を使用して要素を前面に表示する
CSS を使用して要素を前面に表示するには、いくつかの方法があります。 最初の方法は、要素の z-order を指定し、どの要素が上に積み重ねられるかを決定する z-index プロパティを使用することです。
z-index が高い要素は常に、z-index が低い要素の上に積み重ねられます。 したがって、要素を前面に移動するには、ページ上の他のどの要素よりも高い z-index を指定します。
要素を前面に移動するもう 1つの方法は、position プロパティを使用することです。
要素の position 値が absolute または relative であるとします。 その場合、その z-index プロパティをページ上の他のどの要素よりも大きな値に設定することで、それを表示することができます。
最後に、transform プロパティを使用して要素を前面に移動できます。 transform プロパティを使用すると、要素を平行移動、回転、スケーリング、および傾斜させることができます。
要素を前面に出すには、ページ上の他のどの要素よりも大きな値で要素を翻訳します。
CSS に z-index を追加
CSS の z-index プロパティは、ドロップダウン メニューを作成したり、ページの一部を常に表示したりするのに役立ちます。
z-index に設定した値によって、レイヤー順での要素の位置が決まります。 たとえば、z-index を 1 に設定すると要素が最下層に配置され、z-index を 10 に設定すると要素が最上層に配置されます。
z-index: -1;
z-index プロパティは、position の値が absolute、relative、または fixed の要素でのみ機能することに注意してください。 static の position 値を持つ要素で z-index を使用しようとしても、効果はありません。
Flexbox を使用して要素に z-index を追加する
簡単な方法は、フレックスボックスを使用して要素に z-index を追加することです。
-
まず、要素の
z-indexを、フレックス コンテナ内の他の要素のz-indexよりも大きな値に設定する必要があります。 -
要素の
positionをabsoluteに選択します。 -
最後に、
topおよびleftプロパティを0に設定する必要があります。
コード例:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>The z-index Property</h1>
<img src="/img/DelftStack/logo.png" width="100" height="140" />
<p>Since the image has a z-index value of -1, it will be positioned behind the heading.</p>
</body>
</html>
img タグ <img src="image.jpg" width="100" height="140"> に画像を追加して、効果を確認してください。
まとめ
結論として、CSS を使用して要素を前面に表示するには、いくつかの方法があります。 z-index プロパティを使用するのが標準的な方法ですが、position または transform プロパティを使用することもできます。
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn