CSS z-index：概要、プロパティ

CSSルールz-index - Z座標内のページ要素の位置：要素のディスプレイまたはレイヤーが位置するレイヤーのレベル。 より多くのz-indexを持つタグが全体として表示されます。 タグは、着信スレッドに表示され、重なり合う順序で表示されます。 приоритет видимости. z-index値は、可視性の優先順位を決定します。

現代のブラウザや要素を表示するためのアルゴリズムに敬意を表する必要があります。 グラフィックスがスクリーンをキャプチャしてから、アプリケーションウィンドウ内の要素の可視部分と不可視部分を切り取る問題から、可視コンテンツを表示する技術は優れた結果を達成しました。 ブラウザウィンドウでは、すべての項目が正しく表示され、ユーザーはデザインや開発者が定義した内容のみを表示します。

一般規則：注文とレベル

入力ストリーム（サーバーによって形成されたページ）は、ブラウザーによって順番に読み取られます。 すべてのタグはCSSルールに従って表示され、重複する可能性があります。

この例では、4つの可視要素が説明されています。 次のすべてが前のブロックをブロックします。 タグが交差する場所では、優先順位の問題が発生します。 これらすべてのタグのZ-インデックスCSSルールは同じで848に等しいので、次に進む要素が表示されます。 明らかに、それぞれの次の要素の下から見えるすべて。

可視性ルール

ブラウザは、可視性のルールを排他的に「正直に」観察します。 すべてのオーバーレイを一括して分析し、実際に交差するものだけを適用するアルゴリズムを考えるには、次の要素のそれぞれが吸収するサイトを考慮せずには非常に困難です。

ほとんどの場合、これは必要ではありません。 近代的な機器は非常に迅速に動作し、次の要素がそれを上書きする前に要素の再描画に気づくことは非常に問題です。

要素の順序への影響

3番目のタグscCSS3ではz-indexの値を大きくし、scCSS4 - を減らすには一般的な画像が変わるので十分です。 ストリーム内の要素のシーケンスは同じままです。

• id= 'scCSS1'; Div id = 'scCSS1';
• id= 'scCSS2'; Div id = 'scCSS2';
• id= 'scCSS3'; Div id = 'scCSS3';
• id= 'scCSS4'. Div id = 'scCSS4'。

2番目の画像は、実際に見られるよりも多くのスペースを占めることに注意してください。 3番目の画像も。 さらに、それは互いに離れて位置する2つの部分（2つの卵）からなる。

第2および第3の画像を占める領域の実際の寸法は、それぞれ黄色および灰色で強調表示される。

z-indexと背景色の組み合わせ

CSSのバックグラウンドとZ-インデックスのプロパティは互いに補完することに注意してください。 すべてのブロック要素および他のブロック要素は、コンテンツの最大高さおよび最大幅によって形成される矩形領域を常に占有する。

画像を使用すると、要素の領域に任意の形状を与えることができますが、その周囲には常に四角形があります。 これは正しく考慮する重要な事実です。

選択した図形のアウトラインの周りにテキストを配置することはできますが、そうでない場合は、入力ストリームから順に四角形のボックスのような要素にコンテンツが落ちます。

背景色が透明な要素（透明性の一種）上のZ-インデックスのCSSプロパティを使用すると、要素のアウトラインをエミュレートできます。 いずれにしても実際には要素は矩形になります。

イベントと要素の可視性

要素が別の要素によってブロックされている場所では、その要素のイベントは機能しません。 原則として、要素が視界から外れている場合は、範囲外です。

開発者がボタンやメニュー項目をロックしたい場合、彼はブロックされたタグの上に別のタグを置くことができます（CSS不透明ルールを使用するなど）。

ユーザーの視点からは、イベントは意味が分かれていないので、後者（マウスの動き、キーボードの偶発的なキー・プレス、タイマー信号）を使用して、ブラウザー・ウィンドウ内のコンテンツを適切に変更することができます。

簡単な例：ビジターはメニュー項目の 上にマウスポインタを 移動しましたが 、 何もしないことを決定していません。 開発者はこのイベントを予知し、ダイアログの所望のポイントまで移動を追跡し（クリックする - 訪問者が決定を下す）、適切なコンテンツを表示することができる。 CSS z-indexルールは、この場合に最適です。

画像フォーマット

画像はどのサイトにとっても重要な建築材料であるため（美しさ、近代性、機能性はすでに一般的なものです）、画像のフォーマットを選択することは非常に重要です。

全体として、さまざまな既存のフォーマットを使用することができますが、実用性と効率性の観点からは、静的イメージの場合は* .png、アニメーションイメージの場合は* .gifを制限するのが妥当です。 人気のある* .jpgも良いですが、表示スペースを柔軟に操作することはできません。

ブラウザエラーと開発者エラー

CSS z-indexが機能しないことはよくありませんが、それは起こります。 カスケーディングスタイルテーブルのルールは常に機能し、スタイルファイルのボリュームはしばしば重要なボリュームに達します。 何かが表示されていない場合、または単に何をすべきかがわからない場合は、まず自分のコードをチェックしてから、ブラウザのキャッシュをクリアして、再度自分のコードをチェックする必要があります。

HTMLとCSSを解釈すると、ブラウザはほとんど間違いをしません。それは公理です。 目的の要素が存在しない場合は、 CSSの構築{position：absolute; Z-インデックス：112233; 左：10ピクセル。 トップ：20px; ...}何かが間違っているか間違っている。

最も一般的な間違い - 要素の座標が正しくない、可視性が示されている、絶対位置または相対位置が不足している。 時には、そのスタイルではなく、要素に直接スタイルを指定することもできます。 後者の場合、これは状況から脱する方法ですが、これは主にコード内に何らかのエラーがあることを示します。

スタイルは、クラスまたは識別子のスタイルで指定する必要があります。 特別な場合にのみ要素のスタイルを指定します。

jQuery.css（z-index、123）を使用すると、間違ったクラスまたは識別子に適用されるとエラーになることもあります。 さらに、jQueryは本当に素晴らしい開発ツールです。 しかし、あなたがそれを適用する前に、それは考えることを傷つけることはありません：即興のHTML / CSSではできません、Zインデックスは細心の注意を必要としないルールではありません。

正しいレイヤーと論理的な動き

理想的なページは平らです。 いずれにしても、それは大量の実ボリューム画像からは遠く離れており、特別な必要はありません。 現代のサイトは実際の練習、実際の作業です。 彼らは仕事をしなければならないが、フラットなものは3次元のイメージを示す。

ちなみに、「サイト構築」の形式の ランディングページの 現象は、平坦な長方形のフォームと乾燥しているが非常に明確なコンテンツも良好で実用的であるという最も良い確認です。 しかし、独占企業のサイトは独自のままであることに注意すべきである。主なものは会社の人物、その機能性、生産能力である。 情報技術の怪物は、このページが小企業、アクセサリー、ハーバライフ、その他の「ジュエリー」の顔であることを発見しました。

そうかどうか、実際には正しいので、未来が表示されます。 どのバージョンのサイトでも、コンテンツのレイヤーをペイントするだけでなく、レイヤー間の正しい移動を確実にすることも重要です。

完璧なソリューションはAJAXです（ページは必要に応じて更新されます）。 さらに有望な解決策は、ブラウザウィンドウの所定のポイントで必要なものがページに表示される場合です。

実際、z-indexはシンプルなCSSルールです。 その目的は、タグのレベルを表示して、ブラウザが要素をいつ表示するか、この要素のどの部分を表示するかを判断できるようにすることです。 レイヤーとページは非常に相対的な概念です。ページを開発し、さまざまなコンテンツ表示オプションのZ-インデックスルールの値を覚えておくことは問題であるためです。

通常、開発者は好きな番号を選択して行のすべてのタグに渡し、何とか目立つようにする必要がある人は次の番号を割り当てます。 レイヤーとページレベルを重視することは、特に進歩的で有望な方法ではありません。

ただし、z-indexセマンティクスを訪問者との対話領域に移すと、実際の効果を生み出すことができます。 タグが重なり合うように、ダイアログ（サイトビジター）をオーバーレイして、それらの間で移動を実行できます。 この観点から、CSS z-indexルールの適用は非常に実用的で実用的なようです。