Concept

z-index屬性は、要素の重なり順を設(shè)定します。積み重ね順序が高い要素は常に、積み重ね順序が低い要素の前に表示されます。

階層関係の比較

1. 兄弟要素の場(chǎng)合、デフォルト (または position:static) 要素は、ドキュメント フロー內(nèi)で前の要素を上書きします。

2. 同じレベルの要素の場(chǎng)合、位置が靜的でなく、z インデックスが存在する場(chǎng)合、より大きな z インデックスを持つ要素は、より小さな z インデックスを持つ要素をカバーします。つまり、z インデックスが大きいほど、インデックスが大きいほど優(yōu)先度が高くなります。 3. IE6/7 では、位置は靜的ではなく、z-index が存在しない場(chǎng)合、z-index は 0 になります。他のブラウザでは、z-index は自動(dòng)です。

4. z-index が auto である要素は、階層関係の比較に參加せず、z-index が auto ではない要素は比較に參加します。

順序ルールノードにposition屬性が設(shè)定されていない場(chǎng)合、ドキュメントフローの後ろに位置するノードが前のノードをカバーします。

<p id="a">A</p><p id="b">B</p>

位置決めルールpositionがstaticに設(shè)定されている場(chǎng)合、ドキュメントフローの背後にあるノードは依然として前のノードをカバーします

floating

ので、position:static ノードのカバー関係には影響しません。 <a href="http://m.miracleart.cn/code/11748.html" target="_blank"></a><code>position:static?不會(huì)影響節(jié)點(diǎn)的遮蓋關(guān)系。

<p id="a" style="position:static;">A</p><p id="b">B</p>

如果將 position 設(shè)為 relative (相對(duì)定位)，absolute (絕對(duì)定位) 或者 fixed (固定定位)，這樣的節(jié)點(diǎn)會(huì)覆蓋沒(méi)有設(shè)置 position 屬性或者屬性值為 static 的節(jié)點(diǎn)，說(shuō)明前者比后者的默認(rèn)層級(jí)高。

<p id="a" style="position:relative;">A</p><p id="b">B</p>

在沒(méi)有 z-index 屬性干擾的情況下, 根據(jù)這順序規(guī)則和定位規(guī)則, 我們可以做出更加復(fù)雜的結(jié)構(gòu). 這里我們對(duì) A 和 B 都不設(shè)定 position, 但對(duì) A 的子節(jié)點(diǎn) A-1 設(shè)定?position:relative

<p id="a">
????<p id="a-1" style="position:relative;">A-1</p></p><p id="b">B</p>

position が相対 (相対位置指定) に設(shè)定されている場(chǎng)合、絶対 (絶対位置決め ) または固定 (固定位置決め) の場(chǎng)合、そのようなノードは位置屬性が設(shè)定されていないノード、または屬性値が靜的であるノードをカバーします。これは、前者のデフォルト レベルが後者よりも高いことを示します。

<p id="a" style="z-index:2;">A</p><p id="b" style="z-index:1;">B</p><p id="c" style="z-index:0;">C</p>

z-index なし屬性の干渉の場(chǎng)合、この順序ルールと位置ルールに従って、より複雑な構(gòu)造を作成できます。ここでは、A と B の位置を設(shè)定せず、A の子ノード A-1 :relativeposition を設(shè)定します。 /code>. 順序規(guī)則によれば、B は A をカバーし、配置規(guī)則によれば、A' は B をカバーします。

このような実裝が相互に上書きされるのはどのような場(chǎng)合ですか? . ゲートは実際に非常に一般的に使用されており、たとえば、電子商取引 Web サイトのサイドカラムのカテゴリ表示リストは、この手法を使用して実裝できます。下の図は、Web サイトのカテゴリ表示領(lǐng)域を示しています。第 2 レベルのカテゴリのレイヤーが第 1 レベルをカバーします。 カテゴリ リストの外枠と、第 1 レベルのカテゴリのノードが第 2 レベルのカテゴリのフローティング レイヤーをカバーします。 CSS を使用して表示効果を?qū)g現(xiàn)する場(chǎng)合、第一レベルカテゴリの外枠は上の例のAに相當(dāng)し、第一レベルカテゴリのノードはA-1に相當(dāng)し、第二レベルカテゴリの中斷層はBに相當(dāng)します。 參加ルール

position屬性を使用しないようにしますが、z-index屬性はノードに影響を與えないことがわかりました。ノードの屬性は相対、絶対、または固定です。

<p id="a" style="z-index:2;">A</p><p id="b" style="position:relative;z-index:1;">B</p><p id="c" style="position:relative;z-index:0;">C</p>

<p id="a" style="position:relative;z-index:1;">A</p><p id="b" style="position:relative;z-index:0;">B</p><p id="c" style="position:relative;">C</p><p id="d" style="position:relative;z-index:0;">D</p>

すべてのノードがposition:relativeで定義されている場(chǎng)合。ノードz-index 0 と z-index が定義されていないノードは同じレベルにありますが、z-index が 1 以上のノードは、z-index 値が負(fù)の -index ノードをカバーします。 Z インデックスが定義されていないノードによって上書きされます。

<p id="a" style="position:relative;z-index:1;">
????<p id="a-1">A-1</p></p>
?<p id="b" style="position:relative;z-index:0;">
????<p id="b-1">B-1</p></p>

親ルールから

A、B ノードの Position:relative が定義されている場(chǎng)合。ノード A はノード B よりも大きいため、A の子ノードは B の子ノードの前をカバーする必要があります。

<p id="a" style="position:relative;z-index:1;">
????<p id="a-1">A-1</p></p>
?<p id="b" style="position:relative;z-index:0;">
????<p id="b-1">B-1</p></p>

?

如果所有節(jié)點(diǎn)都定義了 position:relative, A 節(jié)點(diǎn)的 z-index 和 B 節(jié)點(diǎn)一樣大, 但因?yàn)轫樞蛞?guī)則, B 節(jié)點(diǎn)覆蓋在 A 節(jié)點(diǎn)前面. 就算 A 的子節(jié)點(diǎn) z-index 值比 B 的子節(jié)點(diǎn)大, B 的子節(jié)點(diǎn)還是會(huì)覆蓋在 A 的子節(jié)點(diǎn)前面.

很多人將 z-index 設(shè)得很大, 9999 什么的都出來(lái)了, 如果不考慮父節(jié)點(diǎn)的影響, 設(shè)得再大也沒(méi)用, 那是無(wú)法逾越的層級(jí).

以上がCSSの基礎(chǔ)：z-indexについて詳しく解説の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。