auto、0、z-index なしの違い

Web ページ内の要素の位置は、開発者によって割り当てられる重要な属性です。要素が正しく配置されていないと、無意味または整理されていないように見える可能性があります。したがって、開発者にとって、各 HTML 要素の位置を賢明に割り当てることが非常に重要です。

それぞれの位置が割り当てられているにもかかわらず、要素が重なる場合があります。これらの重なり合う要素を互いに積み重ねて、他の要素を隠すことができます。この問題を解決するために、CSS は Web デザイン用の z-index プロパティを提供します。この記事では、CSS の z-index プロパティについて学びます。 z-index のさまざまな値とそれらの違いについても説明します。

z-index 属性とは何ですか?

CSS の z-index プロパティを使用すると、開発者は Z 軸上で重なる要素の順序 (つまり、画面上または画面外) を指定できます。ただし、z-index 属性は、static 以外の位置値が指定されている要素でのみ機能します。

HTML 要素のスタック レベルは、z-index 属性によって決まります。 Z 軸上の要素の位置は、(X 軸や Y 軸とは対照的に) 「スタック レベル」と呼ばれます。値が大きい場合、要素は積み重ね順の一番上近くに配置されます。この積み重ね配置は、ビューポートまたはモニターに対して垂直です。

HTML ページの Z 軸上のコンポーネントの自然な積み重ね順序は、さまざまな要因の影響を受けます。これらは、負のスタック コンテキストを持つ要素、非配置、非フローティング、ブロック レベルの要素、非配置、フローティング要素、インライン要素、および位置付き要素であり、すべて表示順に並んでいます。

＃＃＃文法＃＃＃ リーリー

この属性の値は次のとおりです -

• Auto - 重複する順序は親の値と同じです。これはデフォルト値です。

• Number - 重複するシーケンスは、1、2、3 などの数字で指定します。

• #Initial

  - 順序はデフォルトに設定されます。

• 継承

  - 重複する順序は親要素に継承されます。 ＃＃＃例＃＃＃ リーリー

  z-index 属性の自動値

z-index 属性の auto 値は、親要素と同じ要素順序です。

＃＃＃例＃＃＃ リーリー

z-index 属性の値がゼロです

z-index 属性のゼロ値は、要素の順序の数値です。スタックされたコンテンツを作成するには、z-index 値 0 を指定します。たとえば、element1 と element2 という 2 つの要素がある場合、それらの z インデックスはそれぞれ 1 と 0 です。したがって、要素 1 は要素 2 の上に積み重ねられます。そして、それらの z インデックスがそれぞれ -1 と 0 の場合、要素 1 は要素 2 の下にスタックされます。次の例を考えてみましょう。

＃＃＃例＃＃＃ リーリー

z-index 属性には値がありません

z-index 属性の値は、通常、auto 値と同じではありません。

＃＃＃例＃＃＃ リーリー ＃＃＃結論は＃＃＃

難しいトピックは、CSS でのコンテキストのスタックです。この記事では、Web ページ上のスタッキング コンテキストが Z-index によってどのように影響を受けるかを包括的に説明します。Z-index は、完全に理解すると強力な CSS プロパティに変換されます。この機能に慣れてきたので、新しい開発者はそれを効果的に使用し、発生する可能性のあるいくつかの一般的な問題を回避できるはずです。上級開発者は、z-index を適切に適用することでさまざまなレイアウトの課題を解決し、さまざまな創造的な CSS デザイン オプションを提供できることをもっと認識する必要があります。

以上がauto、0、z-index なしの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。