CSS カスケードプロパティの解釈: z-index とposition-CSSチュートリアル-php.cn

CSS カスケードプロパティの解釈: z-index とposition

WBOY

リリース： 2023-10-20 19:19:54

オリジナル

1504 人が閲覧しました

CSS 层叠属性解读：z-index 和 position

CSS カスケードプロパティの解釈: z-index とposition

CSS では、レイアウトとスタイルの設計が非常に重要です。デザインでは、多くの場合、要素を階層化して配置することが必要になります。 2 つの重要な CSS プロパティ、z-index とposition は、これらのニーズを達成するのに役立ちます。この記事では、これら 2 つのプロパティについて詳しく説明し、具体的なコード例を示します。

1. z-index 属性

z-index 属性は、垂直方向の要素の積み重ね順序を定義するために使用されます。要素の積み重ね順序は z-index 属性の値によって決定され、より高い値の要素がより低い値の要素をカバーします。この属性の値は、正、負、または自動になります。

これは、z-index 属性の使用方法を示す例です:

<html>
<head>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .box1 {
        z-index: 1;
    }
    .box2 {
        z-index: 2;
    }
</style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

ログイン後にコピー

上のコードでは、2 つの赤い四角形が作成され、それらの位置が重なっています。 box1 の z-index 属性値は 1、box2 の z-index 属性値は 2 です。したがって、box2 が box1 を覆い、上に表示されます。

位置決め属性 (位置) が静的ではない (つまり、相対、絶対、固定、スティッキー) 要素のみが z-index 属性の影響を受ける可能性があることに注意してください。これは、位置決め属性が静的ではない要素のみがカスケードコンテキストを生成できるためです。

2. Position 属性

position 属性は、要素の配置タイプを指定するために使用されます。可能な値は、静的、相対、絶対、固定の 4 つです。

static:
デフォルト値。要素は、上、右、下、左などの位置属性を無視して、通常のドキュメントフローに従って配置されます。
relative:
要素は通常の位置に従って配置され、位置は上、右、下、左などの属性によって微調整されます。相対配置では、要素が文書の流れから外されることはありません。
absolute:
要素は、最も近い非静的に配置された祖先を基準に配置されます (または、存在しない場合は元の包含ブロックを基準に)。上、右、下、左などの属性を使用して要素を配置し、要素をドキュメントフローから分離します。
修正:
要素はブラウザウィンドウを基準にして配置され、上、右、下、左などの属性によって配置されます。ページがスクロールしても、要素は固定位置に残ります。絶対配置と同様に、この要素もドキュメントフローから削除されます。

次は、position 属性の使用方法を示す例です。

<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

ログイン後にコピー

上記のコードでは、赤い四角形が作成され、その位置決めタイプが相対に設定されます。 top プロパティと left プロパティを使用して、ボックスを通常の位置に対して下に 50 ピクセル、右に 50 ピクセル移動します。

要約すると、z-index とposition は、CSS のカスケードと配置を実現するための重要なプロパティです。これら 2 つの属性を適切に使用し、特定の配置および積み重ね順序の要件と組み合わせることで、ページ要素を正確に制御できます。この記事で提供されているコード例が、読者がこれら 2 つのプロパティをよりよく理解し、適用するのに役立つことを願っています。

以上がCSS カスケードプロパティの解釈: z-index とpositionの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。