ホームページ > 記事 > ウェブフロントエンド > z-index 属性とは何ですか?

z-index 属性とは何ですか?

藏色散人オリジナル: 2021-04-19 11:51:5120419ブラウズ

z-index 属性は、CSS で要素の重なり順を設定するために使用される属性です。より高い重なり順を持つ要素は常に、より低い重なり順を持つ要素の前に配置され、要素には負の値が付けられる場合があります。 z-index 属性値。

z-index 属性とは何ですか?

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、css3 バージョン。

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

注: 要素には負の z-index 属性値を含めることができます。

注: Z-index は、位置決めされた要素 (position:absolute; など) でのみ機能します。

説明

このプロパティは、表示領域に垂直に伸びる軸として定義される Z 軸に沿って、配置された要素の位置を設定します。正の数の場合はユーザーに近くなり、負の数の場合はユーザーから遠ざかります。

デフォルト値: auto

継承: no

バージョン: CSS2

JavaScript 構文: object.style.zIndex="1"

可能な値

auto デフォルト。積み重ね順序は親要素と同じです。

number 要素の重なり順を設定します。

inherit は、z-index 属性の値を親要素から継承することを指定します。

[推奨学習:

css ビデオチュートリアル ]

例

画像の Z インデックスを設定します:

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img  src="/i/eg_smile.gif" / alt="z-index 属性とは何ですか?" >
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>

効果:

z-index 属性とは何ですか?

以上がz-index 属性とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：IEをCSS3に対応させる方法次の記事：IEをCSS3に対応させる方法

続きを見る