CSS での z-index のさまざまな使用法-CSSチュートリアル-php.cn

ほとんどの CSS プロパティは使いやすいです。多くの場合、マークアップ言語の要素で CSS プロパティを使用すると、ページを更新するとすぐに結果が表示されます。他の CSS プロパティはより複雑で、特定の状況でのみ機能します。

Z-index 属性は、上記の後者のグループに属します。 Z インデックスは間違いなく、他のどの属性よりも頻繁に混乱 (互換性) やフラストレーション (開発者心理) を引き起こします。しかし面白いことに、一度 Z-index を本当に理解すると、それが非常に使いやすい属性であり、レイアウト上の多くの課題を解決する強力な助けとなることがわかるでしょう。

この記事では、Z インデックスとは何か、なぜこれほど知られていないのかを正確に説明し、その実用化に関するいくつかの問題について説明します。また、遭遇するブラウザごとの違いや、IE と Firefox の既存のバージョンに存在する固有の問題についても説明します。 Z-index 属性に関するこの包括的な観点は、開発者に Z-index 属性を使用する際の自信の優れた基盤と強力な支援を提供します。

これは何ですか？

Z-index 属性は、HTML 要素のカスケードレベルを決定します。要素のスタックレベルは、(X 軸または Y 軸ではなく) Z 軸上の要素の位置に相対します。 Z インデックスの値が大きいほど、要素が積み重ね順序の一番上に近くなります。この階層化シーケンスは、垂直の糸軸に沿って表示されます。

CSS での z-index のさまざまな使用法

Z インデックスがどのように機能するかをより明確に説明するために、上の画像は積み重ねられた要素の視覚的な位置関係を誇張しています。

自然な積み重ね順序
HTML ページでは、自然な積み重ね順序 (つまり、Z 軸上の要素の順序) は多くの要因によって決定されます。以下は、リスト項目をスタッキングコンテキストで表示するリストです (適切な中国語訳はまだ見つかりません。これらの項目は、スタッキングコンテキストにあるスタッキング環境を参照する必要があります)。環境の底辺。このリスト内の項目には、Z インデックス属性が割り当てられていません。
要素の背景と境界線がスタッキングコンテキストを作成します
引用:
・負の値を持つスタッキングコンテキスト要素は出現順に配置されます(後のレイヤーほど上位になります)
・いいえ位置決め、フローティングなしブロックレベルの要素は出現順に配置されます
・位置決めされていないフローティング要素は出現順に配置されます
・インライン要素は出現順に配置されます
・ポーズ付き要素は出現順に配置されますZ-index プロパティを正しく使用すると、自然な積み重ね順序が変更されます。
もちろん、要素が互いに重なるように配置されていない限り、要素の重なり順は特に明白ではありません。以下に、自然なスタッキングシーケンスを示すために、負のマージンを持つボックスを示します。

CSS での z-index のさまざまな使用法

上のボックスは異なる背景色と境界線の色で定義されており、後の 2 つは互い違いに配置され、負の上部マージンを定義しているため、自然な積み重ね順序がわかります。マークの1位がグレーのBOX、2位がブルーのBOX、3位がゴールドのBOXです。適用された負のマージンは、これらの要素に Z インデックスプロパティセットがないという事実を明確に示しています。その積み重ね順序は自然、つまりデフォルトの複合ルールです。インタレース現象は、負のマージンによって発生します。

なぜ混乱が生じるのでしょうか? Z インデックスは理解するのが難しいプロパティではありませんが、誤った仮定により多くの若手開発者が混乱する原因となる可能性があります。 Z-index は、絶対位置、固定位置、または相対位置の属性が明示的に定義されている要素に対してのみ機能するため、混乱が発生します。
Z-index が位置決めされた要素に対してのみ機能することを証明するために、ここに同じ 3 つのボックスを示します。これらのボックスには、自然な積み重ね順序を壊すために Z-index 属性が適用されています。

CSS での z-index のさまざまな使用法

灰色のBOXのZインデックス値は「9999」、青色のBOXのZインデックス値は「500」、金色のBOXのZインデックス値は「1」です。論理的には、これら 3 つのボックスの積み重ね順序が逆になると考えられます。しかし、これらの要素には位置属性が設定されていないため、これは当てはまりません。

以下は同じ 3 つのボックスで、それぞれposition:relativeに設定されており、それらのZインデックス値は依然として上記のように設定されています。

CSS での z-index のさまざまな使用法

結果は予想どおりです。これらの要素の積み重ね順序が逆になり、灰色のボックスは青で覆われ、青は金で覆われます。
構文
#grey_box {
幅: 200px;
高さ: 200px;
背景: #ddd;
z-index:
} # blue_box { 幅: 200px;
高さ: 200px;
背景: #8daac3;
z-index: 500;
#gold_box
高さ: 200px;
境界線: 1px #8b6125;
位置: 相対;
}

繰り返し、Z-index プロパティは、定義された位置属性に対してのみ機能します要素内で。これは、特に初心者にとっては十分に真剣に受け止められていないことです。

JavaScript の使用

JavaScript を使用して要素に Z-index 属性を動的に追加する場合、構文はアクセスできる他のほとんどの CSS 要素の構文と似ています。つまり、「キャメルケース」を使用します。以下のコードに示すように、の CSS 属性ハイフンを置き換えます。
var myElement = document.getElementById("gold_box");
myElement.style.position = "relative";

IE および Firefox での不適切な解析 (互換性の問題)

特定のケースでは、IE6、IE7、および Firefox2 バージョンでの Z-index 属性の解析に若干の不一致が発生します。 IE の要素は、自然な積み重ね順序、位置属性、または Z を考慮せずに、常に積み重ね順序の先頭に表示されます。 -索引。下の図はこの問題を示しています。

要素にオーバーレイされた多くの
ドロップダウンメニュー

が失敗します。解決策の 1 つは、
JavaScript を使用してを表示することです。他の方法には、
 の使用が含まれます。 IE6/IE7 で親コンテナーが配置される: <img src="https://img.php.cn/upload/article/000/000/007/703cb7510654a00b82b8c2ba0cdc2fbe-5.gif" alt="CSS での z-index のさまざまな使用法" >親コンテナー (要素) が配置されるため、IE6/7 はそのスタッキングコンテキストを誤ってリセットします。このやや複雑なバグを示すために、もう一度 2 つの BOX を配置しますが、今回は配置された要素内に最初の BOX を配置します。 <a href="//m.sbmmt.com/code/6140.html" target="_blank"></a><a href="//m.sbmmt.com/code/7565.html" target="_blank"> 灰色のボックスの z-index 値は「9999」、青色のボックスの z-index 値は「1」です。両方のボックスが位置に設定されます。したがって、正しい実装では、灰色のボックスが青色のボックスにオーバーレイされる必要があります。 ただし、IE6 と IE7 では、灰色のボックスの上に青色のボックスが表示されます。これは、灰色の BOX の外側の親コンテナの位置も設定されていることが原因です。どちらのブラウザも、配置された親コンテナのスタッキングコンテキストを誤って「リセット」してしまいましたが、これはあってはならないことです。灰色のボックスの Z インデックス値は非常に高く、青色のボックスよりも高いはずです。他のブラウザでは、この問題は正しく解決されます。 Firefox 2 の負の値: Firefox 2 バージョンでは、負の Z-index 値により、要素は背景や境界線などの認識されたスタッキングコンテキストの前ではなく、スタッキングコンテキストの後ろに配置されます。。以下のスクリーンショットは、この Firefox 2 のバグを示しています。 <img src="https://img.php.cn/upload/article/000/000/007/703cb7510654a00b82b8c2ba0cdc2fbe-7.gif" alt="CSS での z-index のさまざまな使用法" > 以下は上記スクリーンショットのHTML版です（現在のブログに限り、Smashing Magazineのようにコンテンツ部分にコードデモを表示することはできません。元の例を見たい場合はFirefox 3 または現在使用している他のブラウザで表示すると、通常の解析結果が表示されます。灰色のボックスの背景 (要素スタッキングコンテキストのベース)。すべてのオブジェクトの下にが表示され、灰色のボックス内のテキストが青色のボックスの上に表示されます。 <img src="https://img.php.cn/upload/article/000/000/007/703cb7510654a00b82b8c2ba0cdc2fbe-8.gif" alt="CSS での z-index のさまざまな使用法" > 一般的なアプリケーションの展示 ページ上の要素に z-index 属性を適用すると、さまざまなレイアウトの課題を簡単に解決できると同時に、デザイナーがデザイン内でカスケード項目を使用できるようになります。 千鳥状スライドドアメニュー: この CSS プロパティの実際の適用例: CTCOnlineCME この Web サイトでは、「クリック中」タブに Z-index 属性と明確な千鳥状 PNG 画像を使用して、非常に優れた効果を作成しています。 <img src="https://img.php.cn/upload/article/000/000/007/0dde6fa2ef132a7cc1714a39af0843f7-9.jpg" alt="CSS での z-index のさまざまな使用法" > CSS バブル: trentrichardson.com <img src="https://img.php.cn/upload/article/000/000/007/0dde6fa2ef132a7cc1714a39af0843f7-10.jpg" alt="CSS での z-index のさまざまな使用法" >ライトボックス: If z-index 属性の適用がなければ、JQuery のプラグインである FancyBox など、無料で利用できる高品質のライトボックススクリプトはそれほど多くありませんでした。 <img src="https://img.php.cn/upload/article/000/000/007/0dde6fa2ef132a7cc1714a39af0843f7-11.jpg" alt="CSS での z-index のさまざまな使用法" >ライトボックススクリプトは、半透明の PNG 画像を使用して背景を暗くし、多くの場合ウィンドウのような p を使用して新しい要素を取得し、それを最前列に配置します。画面をカバーする PNG とそれに続く p は両方とも Z-index 属性を使用して、これら 2 つの要素がページ上の他の要素の上に配置されるようにします。 ドロップダウンメニュー: Brainjar の古典的なメニューバーの復讐 に似たドロップダウンメニューは、Z インデックスを使用して、メニューのボタンとそのドロップダウン項目がカスケードの最上部にあることを保証します。 <img src="https://img.php.cn/upload/article/000/000/007/0dde6fa2ef132a7cc1714a39af0843f7-12.jpg" alt="CSS での z-index のさまざまな使用法" >ギャラリーエフェクトの画像表示: JQueryアニメーションとZインデックスを組み合わせて、スライドショーまたはギャラリースタイルの優れたエフェクトを作成します。 usejquery.com ウェブサイトのこのデモは、この 2 つの素晴らしい組み合わせが私たちにもたらす驚きを示しています。 Chris Spooner による <img src="https://img.php.cn/upload/article/000/000/007/ede863567967de6a99b6e65abc17e2b6-13.jpg" alt="CSS での z-index のさまざまな使用法" >ポラロイドフォトギャラリー は、より強力な CSS3 を使用して Z-index と連携して、マウスをその上に移動すると再コーディングされる非常にクールな効果を作成します。 <img src="https://img.php.cn/upload/article/000/000/007/ede863567967de6a99b6e65abc17e2b6-14.jpg" alt="CSS での z-index のさまざまな使用法" >派手なサムネールホバーエフェクトでは、Soh タナカはクエリベースのスクリプトを使用して Z インデックスの割り当てを変更します。 <img src="https://img.php.cn/upload/article/000/000/007/ede863567967de6a99b6e65abc17e2b6-15.jpg" alt="CSS での z-index のさまざまな使用法" > Stu Nicholls による CSS 実験: Stu Nicholls は、彼の Web サイト CSSplay で多数の CSS 例を説明しています。以下は、z-index プロパティに関する作業です。 CSSイメージマップ <img src="https://img.php.cn/upload/article/000/000/007/ede863567967de6a99b6e65abc17e2b6-16.jpg" alt="CSS での z-index のさまざまな使用法" > CSSゲーム <img src="https://img.php.cn/upload/article/000/000/007/c7446890ef411ad379318fcac1e8e4b0-17.jpg" alt="CSS での z-index のさまざまな使用法" > CSS模倣フレームワーク <img src="https://img.php.cn/upload/article/000/000/007/c7446890ef411ad379318fcac1e8e4b0-18.jpg" alt="CSS での z-index のさまざまな使用法" > の強化版カスケードレイアウト： 24通り このウェブサイトはZインデックス付きですツールのテンプレートエクスペリエンスを向上させるために、年と日付の長さと幅が Web サイトの外側のコンテナーと同じになるように拡張され、互いに絡み合い、非常に興味深い効果を生み出します。 <img src="https://img.php.cn/upload/article/000/000/007/c7446890ef411ad379318fcac1e8e4b0-19.jpg" alt="CSS での z-index のさまざまな使用法" > Bizarre Web Pick Bar: Janko At Warp Speed このウェブサイトでは、「Bizarre Web Pick Bar」で Z-index を使用しています。 <img src="https://img.php.cn/upload/article/000/000/007/c7446890ef411ad379318fcac1e8e4b0-20.jpg" alt="CSS での z-index のさまざまな使用法" > 完璧なフルページ背景画像: Chris Coyier がこのテクニックを説明し 、それを ringvemedia.com で実装しました。 z-index をコンテンツコンテナに適用して、「背景」のように見えて実際はそうではない画像上にコンテンツコンテナが表示されるようにします。 <img src="https://img.php.cn/upload/article/000/000/007/5e5f8ab2b927226dc2658b1d5130258f-21.jpg" alt="CSS での z-index のさまざまな使用法" > 概要 CSS におけるカスケード関係は複雑なトピックです。この記事は、このトピックの詳細をすべて説明することを目的としたものではなく、Z インデックスが Web ページのスタック順序にどのような影響を与えるかについて詳しく説明することを目的としています。ここで述べられていることを完全に理解すると、この CSS プロパティが非常に強力であることがわかります。 初心者はこのプロパティを十分に理解し、使用中によく発生する問題の多くを回避できるはずです。さらに、経験豊富な開発者は、Z-index を正しく使用して多くのレイアウトの問題を回避する方法をより深く理解し、より多くの CSS 芸術作品を作成するための扉を開きます。 </a>
以上がCSS での z-index のさまざまな使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。