元素積層レベル(stack level)及びz-inndex分析[勉強したい]

12811 ワード

html XHTML css ブラウザ IE

http://www.kuqin.com/webpagedesign/20080829/15536.html
宣言
位置決め要素:position属性値は、デフォルト値static以外の要素を設定し、relative、absolute、fixedを含む.
プラットフォーム:win/IE win/FF
z-indx:
ディスプレイの方向(以下、Z軸という)に垂直な位置合わせ要素の積層順を決定します.
値: aut𞓜整数|inheit
デフォルト: aut
適用先: 元素の位置付け
継承性: no
stacking contextを理解する
各boxは一つのstacking contextに属しています.これは元素がz軸方向に位置するための参考です.ルート要素はroot stacking contextを形成し、その他のstacking contextは位置決め要素によってz-inndexを設定する時に発生します.例えば、癜div 1｛position:relative;z-indx:0｝はid=div 1の要素にstacking contextを発生させることができます.stacking contextとcontaining blockは必然的に連絡していません.
理解stack level
一つのstacking contextの中の各ボックスには、同じstacking contextの中で、各ボックスのz軸における表示順序が決定されています.同じstacking contextの中で、stack level値が大きいのは上に表示されて、stack level値が小さいのは下に表示されて、同じstack levelのは後から上に来る原則に従います.異なるstacking contextでは、要素表示順序は父親レベルのstacking contextのstack levelで表示の前後を決定します.自分のスタンクレベルには関係ありません.stack levelとz-indxは統一概念ではないので注意してください.(後の文でゆっくりと理解します)
stack levelルール
各stacking contextにはブロックレベル、インライン要素、float属性を設定する要素、ポジショニング要素などが含まれますが、彼らは同じ父親レベルのstacking contextにおける表示順序はどうなりますか?つまり、スタックレベルはどうなりますか?例えば、ブロックレベルの元素とインライン要素が重なったら、誰が上にいますか?誰が後ろにいますか?誰が上にいますか?
w 3 cのstack levelについての紹介により、以下のstack levelルールが得られます.
各stacking contextは以下のstack levelを含む:
1.父親レベルのstacking contextの背景、境界
2.z-inndex値がマイナスの位置付け要素(値が小さいほど下)
3.テキストフローにおける非局在、ブロックレベルのサブ要素
4.テキストフローにおける非局在、floatフロートのサブ要素
5.stacking contextのinline要素が生まれるようです.
さもなくば、inline要素のstack levelはblock要素の前にあります.
6.z-inndex:aut/0の位置決め要素
7.z-inndex値が正の位置決め要素(値が大きいほど上)
以上のstack levelはブラウザで実行されます.
firefox 3.0でのテストは完全に一致しています.firefox 2.0ではちょっと違っています.つまり、「z-indx値がマイナスの位置付け要素」は「親レベルstacking contextの背景、境界」の前にあります.
i 6.0と7.0において、inline要素のstack levelはblock要素の前に位置し、かつ「テキストフローにおける非局在化、floatフロートサブ要素」(以下、フロート要素という)と「テキストフローにおける非局在化、ブロックレベルサブ要素」(以下、ブロック要素という)は同じレベルにある.
テスト:
FF下テスト:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta name="Keywords"
			content="z-index,IE,Firefox,stacking context,stack level" />
		<meta http-equiv="Description"
			content="              （stack level)   " />
		<meta content="all" name="robots" />
		<meta name="author" content="rong179，[email protected]" />
		<meta name="copyright" content="http://rong179.blogbus.com" />
		<title>stack level        </title>
		<style type="text/css" media="all">
#container {
	position: relative;
	left: 100px;
	z-index: 0;
	background: purple;
	width: 500px;
}

#container div {
	height: 200px;
	width: 200px;
}

#box-p-zn {
	position: relative;
	z-index: -1;
	background-color: yellow;
	top: -25px;
	left: -30px;
}

#box-block {
	background-color: aliceblue;
	margin-top: -30px;
	margin-left: 150px;
}

#box-float {
	float: left;
	margin: -50px 100px 0 0;
	background-color: red;
}

#box-inline {
	background-color: gray;
	display: inline;
	padding: 50px 0;
}

#box-p-za {
	position: absolute;
	top: 50px;
	left: 50px;
	background-color: green;
}

#box-p-zp {
	position: relative;
	z-index: 1;
	background-color: greenyellow;
}
</style>
	</head>
	<body>
		<div id="container">
			<div id="box-p-zp">
				  box position:relative;z-index:1;    z-index   
			</div>
			<div id="box-p-za">
				  box position:absolute;z-index:auto;    z-index auto
			</div>
			<div id="box-inline">
				  box inline;
				<br />
				inline  
			</div>
			<div id="box-float">
				  box float;
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				        
			</div>
			<div id="box-block">
				----  box block;        
			</div>
			<div id="box-p-zn">
				  box z-index:-1;    z-index   
			</div>
			<!-         -->
		</div>
	</body>
</html>

テストページ:
http://rong179.blogbus.com/files/12163574750.html(それぞれFF 3.0とFF 2.0で開けてください.)
コードの説明:
前に述べたように、要素のstack levelが同じであれば上に立つ.このコードはドキュメント内の位置に関係なく上に表示されます.コードが一番前にあっても.要素のレベルが低い場合、コードの位置に関係なく、下に表示されます.コードが一番後ろにあっても.
私たちはこの点に基づいて、「3.テキストフローの非局在化、ブロックレベルのサブ要素」と「4.テキストフローの非局在化、floatフロートのサブ要素」を例にとって、「float要素」のコードを「block要素」の前に書いたら、実際に「float要素」が「block要素」の上にあると表示されます.「float元素」のstack levelレベルが「block元素」より高いことを証明できます.同級の場合、または「block元素」のstack level高さはいずれも「block元素」で表示されます.
以上より、標準中の手順に従って、スタックレベルの高い要素コードを前に書いて、スタックレベルの低いコードを後ろに書いてください.もし表示結果が表示されたら、コードは前の要素で上に表示されます.つまり、上のstack levelルールを証明します.
テスト結果:
FF 3.0では結果と標準順序が一致しています.FF 2.0では「Z-indx値がマイナスの位置付け要素」は親レベルstacking contextの背景の下にあります.
IEでのテスト:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta name="Keywords"
			content="z-index,IE,Firefox,stacking context,stack level" />
		<meta http-equiv="Description"
			content="     IE       （stack level)   " />
		<meta content="all" name="robots" />
		<meta name="author" content="rong179，[email protected]" />
		<meta name="copyright" content="http://rong179.blogbus.com" />
		<title>stack level  IE    </title>
		<style type="text/css" media="all">
#container {
	position: relative;
	z-index: 0;
	background: purple;
	width: 400px;
}

#container div {
	height: 200px;
	width: 200px;
}

#box-p-zn {
	position: relative;
	z-index: -1;
	background-color: yellow;
	top: -95px;
	left: 55px;
}

#box-block {
	background-color: aliceblue;
	margin-top: -170px;
	margin-left: 30px;
}

#box-float {
	float: left;
	margin: -50px 0px 0 35px;
	background-color: red;
}

#box-inline {
	background-color: gray;
	display: inline;
	padding: 50px 0;
	margin-left: -10px;
}

#box-p-za {
	position: absolute;
	top: 50px;
	left: 50px;
	background-color: green;
}

#box-p-zp {
	position: relative;
	background-color: greenyellow;
	z-index: 1;
}
</style>
	</head>
	<body>
		<div id="container">
			<div id="box-p-zp">
				  box position:relative;z-index:1;
			</div>
			<div id="box-p-za">
				  box position:absolute;z-index:auto;
			</div>
			<div id="box-float">
				  box float
			</div>
			<div id="box-block">
				<br />
				<br />
				<br />
				<br />
				  box block
			</div>
			<!--            ，    -->
			<div id="box-inline">
				  box inline;
			</div>
			<div id="box-p-zn">
				<br />
				<br />
				<br />
				<br />
				<br />
				  box z-index:-1;
			</div>
			<!--                      -->
		</div>
	</body>
</html>

テストページ:
http://rong179.blogbus.com/files/12163574751.html
コードの説明:
このコードも上のテスト思想に基づいていますが、inline要素のie中の特殊性から、inlineのコードを後に書いて、事実が結論を証明するのは正しいです.「block元素」と「float元素」の順番については交換してテストできます.
テストの結論:
IE下(ie 6.0またはie 7.0にかかわらず)「float要素」と「block要素」は同じstack levelに属し、「inline要素」はそのstack levelより低い.
説明:
float元素、i-inndex:autの位置付け要素は新しいstacking contextが発生したようですが、本当に新しいstacking contextを生むことができます.親レベルstacking contextで位置を決めます.
z-inndex値0を持ち、新しいstacking contextを生み出し、そのサブ要素の位置付けに影響を与える.これはIEのBUGである.
inlineの要素はFFの中で新しいstacking contextを生むことができますが、IEの中ではできません.
これでstack levelルールの内容はもう終わりました.stack levelとz-inndexの違いは理解できるはずです.stack levelはこのstacking contextの中の各元素のz軸における表示順序を決定します.同じstack levelの位置付け要素についてはz-indxによってさらに表示順序を決定します.
いくつかの問題の解釈:
怿飛が『z-index IEにおける迷い』の中で最後に言及した問題:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="Keywords" content="z-index,IE,  " />
		<meta http-equiv="Description" content="    z-index IE       " />
		<meta content="all" name="robots" />
		<meta name="author" content="blank,  " />
		<meta name="copyright" content="http://www.planabc.net" />
		<title>z-index IE    </title>
		<style type="text/css" media="all">
#box1 {
	position: absolute;
	top: 100px;
	left: 210px;
	width: 200px;
	height: 200px;
	background-color: yellow;
	z-index: -10;
}
</style>
	</head>
	<body>
		<div id="box1">
			           IE FF       ？Why？
		</div>
	</body>
</html>

プレゼンテーションのアドレス:
http://rong179.blogbus.com/files/12163573190.html
考える:
解惑:IEブラウザは、body要素に相対位置属性をデフォルトにしたようです.
本当ですか


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style>
* {
	margin: 0;
}

html {
	background: silver;
}

body {
	height: 200px;
	width: 200px;
	background: #0F0;
	text-align: right; /*ie position:relative;      */
	/*ff opacity:0.99;      */
}

#box1 {
	position: absolute;
	left: 100px;
	top: 100px;
	width: 200px;
	height: 200px;
	background: #F00;
	z-index: -1;
}
</style>
	</head>
	<body>
		BODY:z-Index:0
		<div id=“box1”>
			DIV:z-Index:-1
		</div>
	</body>
</html>

プレゼンテーションのアドレス:
http://rong179.blogbus.com/files/12163572440.html
分析:
body 1はbodyの下に表示されています.上のstack levelルールにより、IEで位置属性をデフォルトにした場合、bodyは父レベルstacking contextで、body 1はその上に表示すべきですが、事実はそうではありません.また、bodyにposition:relativeを加えた後、表示効果はstack velルールと一致します.だから、body 1はデフォルトの属性がありません.
なぜ負の値の位置付け要素はIEとFFで一致しないと表示されますか?
ieでは、stack levelの規則により、z-indxは負の位置決め要素のstack levelは、父レベルのstacking contextより高く、その上に表示されます.だから、box 1はieに表示されます.
F 2.0では、その特殊なstack level、つまりz-indxが負の位置付け要素であるstack levelは、父レベルstacking contextより低いので、root stacking contextの下に表示されます.したがって、見ることができません.
また、上のコードにopacityを加えると、F 2.0に表示されます.これはどういう理由ですか?
火狐にopacity属性(1を除く)を設定すると新しいstacking contextが発生します.
上にopacity属性を追加したら、F 2.0にbody 1がbodyの下で表示されます.ff3.0 box 1はbodyの上にあります.
w 3 cの説明でもこれを証明しています.
In future levels of CSS,other properties may
introdce stacking contexts,for example'opacity'
[CSS 3 COLOR]
まとめ:
一つのstacking contextにおける要素のz軸表示順序は、要素が位置するstack levelによって決定され、同じstack levelの位置付け要素についてはz-indxの大きさによってさらに表示順序が決定される.
ieで要素にposition属性を設定します.(staticを除く)新しいstacking contextを生成できます.
ffで要素にopacity属性を設定する(1を除く)ことで、新たなstacking contextが生成されます.
その他の属性を設定すると新しいstacking contextが発生するかもしれませんが、まだ分かりません.位置付け要素のみがZ-inndex(autを除く)を設置しているため、新しいstacking contextが発生します.サブ要素は新しいstacking contextによって、位置付けされます.

JavaScriptのいくつかの小さなテクニック