【CSS】z-index - 要素の重ね順序
CSSのz-indexプロパティをご紹介します。
z-index
z-indexは要素の重ね順序を示すプロパティです。
このプロパティの値はpositionを定義する(staticを除く)要素に効果があります。
基本構文
z-index: 値;
サンプル
<style>
.container {
position: relative;
}
.box {
height: 100px;
width: 100px;
position: absolute;
}
.box1 {
background: yellow;
top: 10px;
left: 10px;
z-index: 2;
}
.box2 {
background: green;
top: 50px;
left: 50px;
z-index: 1;
}
</style>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>