ホームページ >ウェブフロントエンド >htmlチュートリアル >詳細な CSS 属性 (9): z-index_html/css_WEB-ITnose
詳細な CSS 属性 (9): z-index_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:55:571208ブラウズ
新しい 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: