CSS z-index属性の詳しい解説（画像解析付き）_html/css

CSS z-index属性の詳しい解説（画像解析付き）_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:54:51

オリジナル

1566 人が閲覧しました

一部のブロック要素をより階層化するために、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の値が大きいほど、手前にあり、前方が表示されます。