CSSのz-indexで、要素の重なる順番を指定するサンプルです。
目次
仕様 | z-indexプロパティの仕様 |
サンプル | z-indexプロパティのサンプル |
z-indexプロパティの仕様
z-index : 値 |
z-indexプロパティは、要素の重なる順番を指定します。
値 | 説明 |
---|---|
数値 | 数値が大きいほど前面に表示されます。 |
auto | 記述した順番で表示されます。(初期値) |
値を継承しない |
- positionプロパティのrelative,absolute,fixedのどれかが指定されている必要があります。
- 以下はMDNのz-indexプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/z-index
z-indexプロパティのサンプル
z-indexプロパティのサンプルです。
z-indexを以下のように設定した場合
・box1はz-index:10
・box2はz-index:20
・box3はz-index:30
box3が一番前面に出ます。
z-indexを以下のように設定した場合
・box1はz-index:110
・box2はz-index:20
・box3はz-index:30
box1が一番前面に出ます。
コード
上記サンプルのコードです。
7行目にz-index:10、14行目にz-index:20、21行目にz-index:30としています。
<style>
#box1{
position:absolute;
top: 25px;
left:70px;
background-color:#E0FFFF;
z-index:10;
}
#box2{
position:absolute;
top: 50px;
left:140px;
background-color:Cornsilk;
z-index:20;
}
#box3{
position:absolute;
top: 35px;
left:210px;
background-color:BurlyWood;
z-index:30;
}
#d1 div{width: 150px;height:50px;border:1px solid #000;}
</style>
<body >
<div id="d1">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
</body>
関連の記事
CSS 回り込みと解除のサンプル(floatとclear)
CSS positionのrelativeで要素を配置する
CSS positionのabsoluteで要素を配置する
CSS positionのfixedで要素を配置する