z-index

重なった要素に対して用います。

例えばこんな画面があるとします。

一見、Cと書かれた図形のみがあるように見えますが、実はAとBという文字が書かれた

図形が背後に隠れています。

HTML

CSS

z-index: 1;

これを.boxBに追記すると、こうなります。

Bと書かれた図形が出現しました！

次は、Aと書かれた図形を出現させるために、

.boxAに

z-index: 2;

を追記します。

すると、

出ました！

参考サイト：

z-indexの使いかた

https://saruwakakun.com/html-css/basic/z-index

上下左右中央にする方法

https://qiita.com/HiromuMasuda0228/items/6a51c2ce24c69c937092

以上。