コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

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

藏色散人
リリース： 2023-01-05 16:09:41
オリジナル
20452 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル：
z-index
ソース：php.cn
前の記事：IEをCSS3に対応させる方法 次の記事：JavaScriptとJSに違いはありますか
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
for ループはランダムに 1 から 0 まで変化します 基本的に、ページが更新されるたびに、for ループは 1 から 0 に変化する可能性があります。なぜこのようなことが起こるのかはわかりませんが、画像を重ね合わせる方法に影響します。...
から 2024-04-06 16:48:14
0
1
393
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
タグで投稿を検索 投稿をタグごとに表示する必要があります。私のソリューションは次のような単一のタグで機能します: Route::get('/posts',[PostController::class...
から 2024-04-03 22:38:54
0
1
430
オブジェクトの上にカーソルを置くとオブジェクトが消え、別のオブジェクトが表示されてクリックできるようにするにはどうすればよいですか? 最初のオブジェクトは、クラス「dog-letter」のオブジェクトです。これには、クラス「dog」と「letter」の 2 つのオブジェクトがあります。ホバーすると消えるようにする...
から 2024-04-01 13:23:16
0
1
355
Vue は環境ごとに異なる vue.config.js 構成を設定します マルチページのアプリケーションがあり、いくつかのページを開発環境でのみ表示する必要があります。これは私の vue.config.js です: module.exports={pro...
から 2024-03-31 19:40:28
0
1
292
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート