詳細css z-indexプロパティ
6942 ワード
汗颜といえば、これまでcssに対して胜ちを求めなかったことが多い.自分の
に質問
を作る必要があるまで、z-indexには全く慣れていないことに気づいた.z-indexに関する問題は、どのように動作しているのかを完全に理解している人は少ない.実際には複雑ではありませんが、規範を読むのに時間をかけなければ、重要な観念に気づかなかったかもしれません.に質問
次のHTMLには ， absolute をファイルの に する. の
1つ のz-index: 1は、 の2つは けられていません.
はプログラムコードです.div
span class="red" RED
div
span class="green" GREEN
div
span class="blue" BLUE
.red, .green, .blue {
width: 100px;
color: white;
line-height: 100px;
text-align: center;
position: absolute;
}
.red {
z-index: 1;
background: red;
top: 20px;
left: 20px;
}
.green {
background: green;
top: 40px;
left: 40px;
}
.blue {
background: blue;
top: 60px;
left: 60px;
}
こちらには さな があります. いブロックの HTML の はできません は、 の のz-index を または することはできません.は、positionの を または することはできません.
は のようにして、まず で えてみないでください.
に える
この は、 1のopacityから
div:first-child {
opacity: .99;
}
， opacity: .99を えることによって、 の を することができる. りの がこれらのメカニズムをよりよく するのに つことを んでいます.
スタックの を z-indexはとても に えますが、 なくとも が めてこの を たとき、 は きいz-indexほど に ぶべきだと っていましたよね?しかし、 は はそんなに ではありません.ほとんどの がルールを するのに がかからないほど に えます.
HTML の の は、 の の または ろに することができます.これは、 たちが っているスタック です.このような のルールは に に されていますが、 がさっき ったように、 くの は に に していません.z-indexとpositionの がない 、ルールは に で、ファイルのtagが いた に います.まあ、 はちょっと ですが、 の を してください.しかし、 marginを してinlineの をカバーしない り、 たちはこれらの な に することはありません.positionの を すると、positionに された およびそれらの は、positionに されていない の の に れる.ここで、positionとは、staticに された の 、 えば、relative、absoluteを す.
にz-indexに すると、もっと になります. きなz-indexを えた が に び、z-indexもない に われるのは だと います.しかし、 にはそんなに ではありません.まず、z-indexはpositionを した にしか ではありません.z-indexをstaticの に してみると、 も こりません. 2 z-indexはstacking contextを し、この が に る です.
Stacking Context ， ( )， stacking contextがある 、stacking contextを に するには、z-indexがどのようにstacking orderにソートされているかを する があります.
stacking contextには、そのルート として のHTML があり、 しいstacking contextまたは を して に されると、このスタック は、その のサブ の stacking orderを し、そのうちの1つの がこのスタック の で も に べられている 、 の の が い の に れる は くありません. のz-indexが9999999999に されていても.
の から えば、positionに された は、 のstacking orderのほかに、 にサブ があれば、stacking contextが の を する. stacking contextには、 の3つの があります.1つを すればいいです. がウェブファイルのルート である 、 、
positionのstatic の であり、z-indexはauto の
がopacityに 1 である.
， ， 。 w3c ， 。
opacityの のいくつかの しい は、transforms、filters、css-regions、paged mediaなど、stacking contextを します.また、cssプロパティがスクリーンを えた でレンダリングされる がある 、stacking contextも されます.
スタック での の を する
にglobal stackingでページ のソートを するにはborders,backgroundが まれており, は めて で,この の を えている.しかし、 くのアプリケーションでは、ソートに する な が の に つので、 しましょう.
スタック Stacking Contextでの
のスタック では、 ( ろ)から ( )までのルールは のとおりです.
は、スタックされたルート を します. には、positionに され、z-indexが である およびそれらのサブ があり、-1 -2 である. にはpositionの 、 が されていません. にはpositionが され、z-indexがautoであり、opacityが1より さく、その のtransformsより さいなどの もこの に されている. は、positionが され、z-indexは である.
じように、ファイルにプログラムコードが される よりも、 に されるカバーが にあります.
:2 の はstacking contextが ( ろ)に べられ、 の の ろに れていることを します.そのため、 の ろに を すことが になりました. の を うかもしれませんが、 のような を えてみてください.div[z-index: 1, position: relative] /
ドメイン のスタックソートGlobal Stacking Order
スタック stacking contetxtがどのように されているかを に し、どのようにソートするかの を した 、1つの が のスタック でどのようにソートされるかを するのは しくありません. stacking context。 。
。 z-indexを きく しても はありません. を ると、stacking contextの を えている がいることがわかります.
まとめ
の に りますが、 はhtml を してこれらの を しましょう.
のdivにopacityを えると、 から へのソートは
は6のspanは のdivもstacking contextを えているため は の4,5のspanより さい. はまた で を に められた.この がz-indexについてもっとはっきりしていることを んでいます.
しげん
w 3 c - MDN stacking context z-index No one told you about z-index
absolute をファイルの に する. の1つ の
z-index: 1は、 の2つは けられていません.はプログラムコードです.
div
span class="red" RED
div
span class="green" GREEN
div
span class="blue" BLUE.red, .green, .blue {
width: 100px;
color: white;
line-height: 100px;
text-align: center;
position: absolute;
}
.red {
z-index: 1;
background: red;
top: 20px;
left: 20px;
}
.green {
background: green;
top: 40px;
left: 40px;
}
.blue {
background: blue;
top: 60px;
left: 60px;
}こちらには さな があります. いブロックの
z-index positionの は のようにして、まず で えてみないでください.
に える
この は、 1のopacityから
div:first-child {
opacity: .99;
}
， opacity: .99を えることによって、 の を することができる. りの がこれらのメカニズムをよりよく するのに つことを んでいます.
スタックの を z-indexはとても に えますが、 なくとも が めてこの を たとき、 は きいz-indexほど に ぶべきだと っていましたよね?しかし、 は はそんなに ではありません.ほとんどの がルールを するのに がかからないほど に えます.
HTML の の は、 の の または ろに することができます.これは、 たちが っているスタック です.このような のルールは に に されていますが、 がさっき ったように、 くの は に に していません.z-indexとpositionの がない 、ルールは に で、ファイルのtagが いた に います.まあ、 はちょっと ですが、 の を してください.しかし、 marginを してinlineの をカバーしない り、 たちはこれらの な に することはありません.positionの を すると、positionに された およびそれらの は、positionに されていない の の に れる.ここで、positionとは、staticに された の 、 えば、relative、absoluteを す.
にz-indexに すると、もっと になります. きなz-indexを えた が に び、z-indexもない に われるのは だと います.しかし、 にはそんなに ではありません.まず、z-indexはpositionを した にしか ではありません.z-indexをstaticの に してみると、 も こりません. 2 z-indexはstacking contextを し、この が に る です.
Stacking Context ， ( )， stacking contextがある 、stacking contextを に するには、z-indexがどのようにstacking orderにソートされているかを する があります.
stacking contextには、そのルート として のHTML があり、 しいstacking contextまたは を して に されると、このスタック は、その のサブ の stacking orderを し、そのうちの1つの がこのスタック の で も に べられている 、 の の が い の に れる は くありません. のz-indexが9999999999に されていても.
の から えば、positionに された は、 のstacking orderのほかに、 にサブ があれば、stacking contextが の を する. stacking contextには、 の3つの があります.1つを すればいいです. がウェブファイルのルート である 、 、
positionのstatic の であり、z-indexはauto の
がopacityに 1 である.
， ， 。 w3c ， 。
opacityの のいくつかの しい は、transforms、filters、css-regions、paged mediaなど、stacking contextを します.また、cssプロパティがスクリーンを えた でレンダリングされる がある 、stacking contextも されます.
スタック での の を する
にglobal stackingでページ のソートを するにはborders,backgroundが まれており, は めて で,この の を えている.しかし、 くのアプリケーションでは、ソートに する な が の に つので、 しましょう.
スタック Stacking Contextでの
のスタック では、 ( ろ)から ( )までのルールは のとおりです.
は、スタックされたルート を します. には、positionに され、z-indexが である およびそれらのサブ があり、-1 -2 である. にはpositionの 、 が されていません. にはpositionが され、z-indexがautoであり、opacityが1より さく、その のtransformsより さいなどの もこの に されている. は、positionが され、z-indexは である.
じように、ファイルにプログラムコードが される よりも、 に されるカバーが にあります.
:2 の はstacking contextが ( ろ)に べられ、 の の ろに れていることを します.そのため、 の ろに を すことが になりました. の を うかもしれませんが、 のような を えてみてください.div[z-index: 1, position: relative] /
ドメイン のスタックソートGlobal Stacking Order
スタック stacking contetxtがどのように されているかを に し、どのようにソートするかの を した 、1つの が のスタック でどのようにソートされるかを するのは しくありません. stacking context。 。
。 z-indexを きく しても はありません. を ると、stacking contextの を えている がいることがわかります.
まとめ
の に りますが、 はhtml を してこれらの を しましょう.
のdivにopacityを えると、 から へのソートは
は6のspanは のdivもstacking contextを えているため は の4,5のspanより さい. はまた で を に められた.この がz-indexについてもっとはっきりしていることを んでいます.
しげん
w 3 c - MDN stacking context z-index No one told you about z-index
div:first-child {
opacity: .99;
} ， opacity: .99を えることによって、 の を することができる. りの がこれらのメカニズムをよりよく するのに つことを んでいます.
スタックの を z-indexはとても に えますが、 なくとも が めてこの を たとき、 は きいz-indexほど に ぶべきだと っていましたよね?しかし、 は はそんなに ではありません.ほとんどの がルールを するのに がかからないほど に えます.
HTML の の は、 の の または ろに することができます.これは、 たちが っているスタック です.このような のルールは に に されていますが、 がさっき ったように、 くの は に に していません.z-indexとpositionの がない 、ルールは に で、ファイルのtagが いた に います.まあ、 はちょっと ですが、 の を してください.しかし、 marginを してinlineの をカバーしない り、 たちはこれらの な に することはありません.positionの を すると、positionに された およびそれらの は、positionに されていない の の に れる.ここで、positionとは、staticに された の 、 えば、relative、absoluteを す.
にz-indexに すると、もっと になります. きなz-indexを えた が に び、z-indexもない に われるのは だと います.しかし、 にはそんなに ではありません.まず、z-indexはpositionを した にしか ではありません.z-indexをstaticの に してみると、 も こりません. 2 z-indexはstacking contextを し、この が に る です.
Stacking Context ， ( )， stacking contextがある 、stacking contextを に するには、z-indexがどのようにstacking orderにソートされているかを する があります.
stacking contextには、そのルート として のHTML があり、 しいstacking contextまたは を して に されると、このスタック は、その のサブ の stacking orderを し、そのうちの1つの がこのスタック の で も に べられている 、 の の が い の に れる は くありません. のz-indexが9999999999に されていても.
の から えば、positionに された は、 のstacking orderのほかに、 にサブ があれば、stacking contextが の を する. stacking contextには、 の3つの があります.1つを すればいいです. がウェブファイルのルート である 、 、
positionのstatic の であり、z-indexはauto の
がopacityに 1 である.
， ， 。 w3c ， 。
opacityの のいくつかの しい は、transforms、filters、css-regions、paged mediaなど、stacking contextを します.また、cssプロパティがスクリーンを えた でレンダリングされる がある 、stacking contextも されます.
スタック での の を する
にglobal stackingでページ のソートを するにはborders,backgroundが まれており, は めて で,この の を えている.しかし、 くのアプリケーションでは、ソートに する な が の に つので、 しましょう.
スタック Stacking Contextでの
のスタック では、 ( ろ)から ( )までのルールは のとおりです.
は、スタックされたルート を します. には、positionに され、z-indexが である およびそれらのサブ があり、-1 -2 である. にはpositionの 、 が されていません. にはpositionが され、z-indexがautoであり、opacityが1より さく、その のtransformsより さいなどの もこの に されている. は、positionが され、z-indexは である.
じように、ファイルにプログラムコードが される よりも、 に されるカバーが にあります.
:2 の はstacking contextが ( ろ)に べられ、 の の ろに れていることを します.そのため、 の ろに を すことが になりました. の を うかもしれませんが、 のような を えてみてください.div[z-index: 1, position: relative] /
ドメイン のスタックソートGlobal Stacking Order
スタック stacking contetxtがどのように されているかを に し、どのようにソートするかの を した 、1つの が のスタック でどのようにソートされるかを するのは しくありません. stacking context。 。
。 z-indexを きく しても はありません. を ると、stacking contextの を えている がいることがわかります.
まとめ
の に りますが、 はhtml を してこれらの を しましょう.
のdivにopacityを えると、 から へのソートは
は6のspanは のdivもstacking contextを えているため は の4,5のspanより さい. はまた で を に められた.この がz-indexについてもっとはっきりしていることを んでいます.
しげん
w 3 c - MDN stacking context z-index No one told you about z-index
， ( )， stacking contextがある 、stacking contextを に するには、z-indexがどのようにstacking orderにソートされているかを する があります.
stacking contextには、そのルート として のHTML があり、 しいstacking contextまたは を して に されると、このスタック は、その のサブ の stacking orderを し、そのうちの1つの がこのスタック の で も に べられている 、 の の が い の に れる は くありません. のz-indexが9999999999に されていても.
の から えば、positionに された は、 のstacking orderのほかに、 にサブ があれば、stacking contextが の を する. stacking contextには、 の3つの があります.1つを すればいいです. がウェブファイルのルート である 、 、
positionのstatic の であり、z-indexはauto の
がopacityに 1 である.
， ， 。 w3c ， 。
opacityの のいくつかの しい は、transforms、filters、css-regions、paged mediaなど、stacking contextを します.また、cssプロパティがスクリーンを えた でレンダリングされる がある 、stacking contextも されます.
スタック での の を する
にglobal stackingでページ のソートを するにはborders,backgroundが まれており, は めて で,この の を えている.しかし、 くのアプリケーションでは、ソートに する な が の に つので、 しましょう.
スタック Stacking Contextでの
のスタック では、 ( ろ)から ( )までのルールは のとおりです.
は、スタックされたルート を します. には、positionに され、z-indexが である およびそれらのサブ があり、-1 -2 である. にはpositionの 、 が されていません. にはpositionが され、z-indexがautoであり、opacityが1より さく、その のtransformsより さいなどの もこの に されている. は、positionが され、z-indexは である.
じように、ファイルにプログラムコードが される よりも、 に されるカバーが にあります.
:2 の はstacking contextが ( ろ)に べられ、 の の ろに れていることを します.そのため、 の ろに を すことが になりました. の を うかもしれませんが、 のような を えてみてください.div[z-index: 1, position: relative] /
ドメイン のスタックソートGlobal Stacking Order
スタック stacking contetxtがどのように されているかを に し、どのようにソートするかの を した 、1つの が のスタック でどのようにソートされるかを するのは しくありません. stacking context。 。
。 z-indexを きく しても はありません. を ると、stacking contextの を えている がいることがわかります.
まとめ
の に りますが、 はhtml を してこれらの を しましょう.
のdivにopacityを えると、 から へのソートは
は6のspanは のdivもstacking contextを えているため は の4,5のspanより さい. はまた で を に められた.この がz-indexについてもっとはっきりしていることを んでいます.
しげん
w 3 c - MDN stacking context z-index No one told you about z-index