演習課題「ボックスの重なりを指定してみよう」
現在、ブラウザでは、relative、absolute、fixedと書かれた3つの正方形が表示されています。これらにはそれぞれrelative_box、absolute_box、fixed_boxというクラス属性が指定されています。
ここで、fixed_boxクラスのz-indexプロパティに1を指定して、fixed_boxを一番上に表示させてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃08:ボックスの重なり順(z-index)
このチャプターでは、ボックスの重なり順を学習します。
CSSのz-indexプロパティは、配置された要素（positionプロパティの値がstatic以外の要素）が重なった場合に、どちらを前面に表示するか（奥行き方向の表示順序）を指定します。z-indexには整数値を指定します。値が大きいほど、より手前（前面）に表示されます。負の値も指定可能です。
モーダルダイアログ、ドロップダウンメニュー、ツールチップなど、他の要素の上に重ねて表示したいUIコンポーネントを作成する際によく利用されます。
@charset "UTF-8";
.contents {position: relative;}
.contents div {
width: 100px;
height: 100px;
}
.box_1 {
position: relative;
background-color: aqua;
}
.box_2 {
position: absolute;
left: 30px;
top: 30px;
background-color: yellow;
}
.box_3 {
position: absolute;
left: 60px;
top: 60px;
background-color: silver;
}
.box_1 {z-index: 1;}
MDN web docs - z-index
https://developer.mozilla.org/ja/docs/Web/CSS/z-index