詳細な CSS 属性 (9): z-index_html/css_WEB-ITnose
新しい CSSer ではない場合は、z-index の使用法を一般的に理解しておく必要があります。Z-index は、表示画面 (Z 軸) に垂直な方向の要素の配置順序を制御します。この記事では、基本的な API の使用方法については説明しませんが、z-index がどのように機能するか、z-index を使用する際の問題点、および日常の開発における z-index の使用についてより深く理解することを目的としています。 例を通して今日のテキストを紹介しましょう。 コード例:
<style type="text/css"> .red, .green, .blue { position: absolute; width: 100px; height: 100px; text-align: center; line-height: 100px; color: #fff; } .red { background-color: red; z-index: 1; } .green { background-color: green; top: 70px; left: 70px; } .blue { background-color: blue; top: 140px; left: 140px; }</style> <div> <span class="red">Red box</span></div><div> <span class="green">Green box</span></div><div> <span class="blue">Blue box</span></div>以下に示すように:
上のコードは、誰でも簡単に考えられる質問です。ルール 緑と青の要素の後は？
1) HTML マークアップはいかなる方法でも変更できません。
2) 要素の z-index 属性は増加または変更できません。
3) 要素の位置属性は増加または変更できません。考えてみてください。問題を解決するにはどうすればよいでしょうか?理由を説明してください? - - - - - - - - - - - - - - - - - - 分割線 - - - - - - - ----------------------------------
1. Z インデックスのゴールデン ルールとスタック コンテキスト
1) a ボックスに z-index 属性を通じて異なるスタック レベルが割り当てられない限り、ボックスとその親は同じスタック レベルを持ちます。
2) z-index 属性は、position 属性が相対、絶対、または位置属性の場合にのみ適用されます。固定要素オブジェクト;
3) 位置決めされた要素に 1 未満の不透明度属性値を設定することは、要素に z-index 値を追加するのと同じように、スタック コンテキストを作成することを意味します。
4) 位置決めされたボックスの場合、z -index 属性が指定されている場合は、次のことを意味します:
-> ボックスのスタック レベルは現在のスタック コンテキスト内にあります ;
5) ボックスがローカル スタック コンテキストを確立していない場合z-index を指定すると、要素は次の順序で (後ろから前に) 積み重ねられます:
-> ソース コード内の順序に従って、ボックス。
-> 計算後の表示属性値は、ソース コード シーケンスに従って、inline/inline-block/inline-table ボックスに設定されます。
したがって、位置決めされた要素に z-index を設定するときは、次の 2 つのことを行います:
1) 要素は、その前後の要素と同じ z-index を共有します。これが理由です。 z-index の値を変更すると、その要素は他の要素を前後に移動します。
2) 要素内の任意の要素に対して新しいスタック コンテキストを作成します。スタック コンテキストを作成すると、(スタック コンテキスト) を持つ内部のレイヤーはこのスタック コンテキストに残ります。 上記の黄金律を通して、あなたはすでに上記の質問に対する答えを知っているかもしれません。黄金律では、「スタック コンテキスト」という新しい用語について、以下の例を通して紹介しましょう:
<!DOCTYPE html><html><html lang="en"><head> <meta charset="utf-8"> <title>z-index example</title></head><body><h1>Header</h1> <p>I am paragraph. <em> I am em</em></p> </body></html>
非常に特殊なケースは、ドキュメント内に位置決めがなく、ドキュメントにスタック環境が 1 つだけあるということです。 - HTML 経由で作成されます。 上記の例に次のスタイルを追加しましょう:
h1, p { position: relative; } h1 { z-index: 2; } p { z-index: 1; }この場合、h1 と p はスタック コンテキストを作成しており、両方のスタック コンテキストはドキュメントのスタック コンテキスト内にあります。スタイルを追加すると、h1 が p 要素の上になります。次のスタイルを em 要素に追加するとどうなりますか:
h1, p, em { position: relative; } h1 { z-index: 2; background-color: #f0f; } p { z-index: 1; background-color: #00f; line-height: 40px; } em { z-index: 1; background-color: #f00; }このスタイルを追加すると、em はスタック コンテキストを作成します。em の z-index 属性により、その内部テキストは他のテキストよりもユーザーに近くなります。 pタグ。これは p のスタック コンテキスト内にあるため、常に h1 のテキストよりも下位になります。 注: z-index 値を増やす場合、h1 より上の em は使用できません。あるコンテキストの要素を別のコンテキストの要素の上に置きたい場合は、コンテキスト全体を呼び出すか、それらを同じコンテキストに設定する必要があります。 解決策 1:
h1, p, em { position: relative; } h1 { z-index: 2; background-color: #f0f; } p { /* raise the entire context，p and em 都在h1 之上了*/ z-index: 3; background-color: #00f; line-height: 40px; margin-top: -40px; } em { z-index: 1; background-color: #f00; }解決策 2:
h1, p, em { position: relative; } h1 { z-index: 2; background-color: #f0f; } p { background-color: #00f; line-height: 40px; margin-top: -40px; } em { /* put them into the same context */ z-index: 2; background-color: #f00; }2. スタック コンテキストの作成と注意事項
それでは、スタック コンテキストを作成するにはどのような方法があるでしょうか。
1) 要素がドキュメントのルート要素 (要素) である場合
2) 要素の位置値が static 以外、z-index 値が auto 以外である場合
3) 要素が不透明度を持つ場合1 未満の値
更新: 不透明度に加えて、いくつかの新しい CSS プロパティもスタック コンテキストを作成します。これらには、変換、フィルター、CSS 領域、ページ化されたメディアなどが含まれます。 CSS プロパティはオフスクリーン コンテキストでのレンダリングを必要とし、新しいスタッキング コンテキストを作成する必要があります。
WebKit では、position:fixed または -webkit-overflow-scrolling:touch を使用してボックスをスタイル設定すると、 z-index 値。
また、次の CSS3 の「トリガー」にも注意してください:
transform != none
transform-style:preserve-3d
filter != none Clip-Path、Mask
Lastly, even though a relatively positioned element without a z-index set does not establish a stacking context… A common IE bug, often seen in drop-down menus, is that any relatively positioned element that has haslayout set to true establishes a stacking context. One may visualize this bug by setting [A] and [B] to position:relative, while [a] gets position:relative; z-index:1. Now, dragging [A] under [B] hides [a] - in Internet Explorer, that is. Any positioned child with a z-index is caught by this wrong stacking context of its parent.
三、z-index在某些浏览器中的问题
1) IE6中的 select元素是一个窗口控件，所以它总是出现在层叠顺序的顶部而不会顾及到自然层叠顺序、position属性或者是z-index。可以在div元素上添加一个iframe设置为position:absolute，并设置div的z-index比iframe的高。
2) 因父容器（元素）被定位的缘故，IE6/7会错误的对其stacking context进行重置。
3) 在Firefox2版本中，一个负的z-index值会使元素位于stacking context的后面，而不是位于公认的背景和边框这样的元素stacking context之前。 本文到此结束，最后附上本文开始时提出的问题的答案：
/* add this */div:first-child {opacity: .99;}感谢您的阅读，文中不妥之处，还望批评指正。
四、参考链接：
Find out how elements stack and start using low z-index values
The Z-Index CSS Property: A Comprehensive Look
Elaborate description of Stacking Contexts
Overlapping And ZIndex
CSS/Properties/z-index
Understanding CSS z-index(MDN)
What No One Told You About Z-Index
测试Demo:
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7476
15
1377
52
77
11
19
32
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
