CSSz -indexプロパティ
例
画像のz-indexを設定します。
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
定義と使用法
プロパティは、要素のz-index
スタック順序を指定します。
スタック順序が大きい要素は、常にスタック順序が小さい要素の前にあります。
注: z-index
配置された要素(位置:絶対、位置:相対、位置:固定、または位置:スティッキー)およびフレックスアイテム(
display:flex要素の直接の子である要素)でのみ機能します。
注: 2つの配置された要素がz-index
指定なしでオーバーラップする場合、HTMLコードの最後に配置された要素が一番上に表示されます。
デフォルト値: | 自動 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSS2 |
JavaScript構文: | object .style.zIndex = "-1" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
CSS構文
z-index: auto|number|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
auto | Sets the stack order equal to its parents. This is default | |
number | Sets the stack order of the element. Negative numbers are allowed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
関連ページ
CSSチュートリアル:CSSポジショニング
HTML DOMリファレンス:
zIndexプロパティ