ホームページ > 記事 > ウェブフロントエンド > CSS z-index属性の詳しい解説（画像解析付き）_html/css_WEB-ITnose
CSS z-index属性の詳しい解説（画像解析付き）_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:54:511535ブラウズ
一部のブロック要素をより階層化するために、CSS の z-index プロパティを使用することがあります。
以下に示すように: z-index を使用してマウスをテキストの後ろに配置し、Web ページをより階層的にすることができます
上記の効果を実現するコードは次のとおりです:
<span style="font-size:24px;"><html><head><style type="text/css">img.x{position:absolute;left:0px;top:0px;z-index:-1}</style></head><body><h1>这是一个标题</h1><img class="x" src="/i/eg_mouse.jpg" /> <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p></body></html></span> しかし、多くの初心者CSS を学習したばかりの人は混乱するでしょう。z-index 属性については少し混乱しています。当然、z-index 属性を自分で設定したのに、効果が見られないのはなぜでしょうか。
この問題を解決するには、w3c にアクセスして公式の定義を確認する必要があります:
ここで特別な説明が必要なのは、Z インデックスは絶対、固定、または相対の場合にのみ機能します。位置属性が明確に定義されている要素では、位置属性が定義されていない場合、z-index 属性は効果がありません。
そのため、Z-index は位置決めされた要素 (position:absolute; など) でのみ機能します
次のコードと図を使用して比較します:
1、position 属性はコードで定義されていません
<span style="font-size:24px;"><!DOCTYPE html><html><head> <title>学习认识z-index</title> <meta charset="utf-8"> <style type="text/css"> #box{ width: 1000px; height:1000px; border: 1px royalblue solid; } #box1{ background-color: red; width: 200px; height: 200px; z-index: 999; } #box2{ background-color: yellow; width: 200px; height: 200px; margin-left: 150px; z-index: 99; } #box3{ background-color: green; width: 200px; height: 200px; margin-left: 300px; z-index: 9; } </style></head><body><div id="box"> <div id="box1"> <span >我的z-index为999</span> </div> <div id="box2"> <span >我的z-index为99</span> </div> <div id="box3"> <span >我的z-index为9</span> </div></div></body></html></span> 表示結果は次のとおりです:
上の図から、z-index 属性が明確に設定されていることがわかりますが、カスケード効果がないのはなぜですか?これは、ほとんどの初心者が遭遇する問題です。現時点では、W3C にアクセスして z-index に関するルールを読む必要があります。上記の W3C ルールには、「Z-index のみを使用できます。」という文があります。位置決めされた要素 (position:absolute; など) を操作します。
position:absolute; 属性をコードに追加して、表示効果を確認しましょう:
2、position:absolute; 属性が定義されています コード:
<!DOCTYPE html><html><head> <title>学习认识z-index</title> <meta charset="utf-8"> <style type="text/css"> #box{ width: 1000px; height:1000px; border: 1px royalblue solid; } #box1{ background-color: red; width: 200px; height: 200px; z-index: 999; position: absolute; } #box2{ background-color: yellow; width: 200px; height: 200px; margin-left: 150px; z-index: 99; position: absolute; } #box3{ background-color: green; width: 200px; height: 200px; margin-left: 300px; z-index: 9; position: absolute; } </style></head><body><div id="box"> <div id="box1"> <span >我的z-index为999</span> </div> <div id="box2"> <span >我的z-index为99</span> </div> <div id="box3"> <span >我的z-index为9</span> </div></div></body></html> この時点では、下の図に示すようなカスケード効果が表示されます。
まとめると、ご参考までに以下のようなまとめを作りました。
CSS の z-index 属性
1. 定義と使用法
z-index 属性は、要素の重なり順を設定します。積み重ね順序が高い要素は常に、積み重ね順序が低い要素の前に表示されます。
注: 要素には負の z-index 属性値を含めることができます。
注: Z-index は、位置決めされた要素 (position:absolute; など) でのみ機能します。
注: Z-index は、絶対、固定、または相対の 3 つの位置属性が明確に定義されている要素でのみ機能します。 Position 属性が定義されていない場合、z-index 属性は効果がありません。
2, 説明
このプロパティは、表示領域に対して垂直に伸びる軸として定義される Z 軸に沿って、配置された要素の位置を設定します。正の数の場合はユーザーに近くなり、負の数の場合はユーザーから遠ざかります。
平たく言えば、z-indexの値が大きいほど、手前にあり、前方が表示されます。