メインビジュアルの分解はこのようになります ※スライドショーの実装はまだしなくて大丈夫です

パーツ的にはこの3つのパーツで構成されています これを重ねることでメインビジュアルができています！ ここで使うのがbackground-imageとpositionです background-imageについてはこちら(https://narrow-poultry-311.notion.site/background-image-5833673d28374ee2b4f72987d9894040)で解説しているので、こちらを参照ください

positionはflex-boxと同様に、階層を理解して親要素子要素を理解することが必須ですので、ざっくり説明します！

■positionの使い方

基本構造 親　position: relative; 子　position: absolute;

親要素を基準にして、top、right、bottom、leftを指定することで子要素を自由に移動させることができる、以下のようにして指定します

左上に子要素を配置する
.red-box {
    position: relative;
}

.yellow-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
}

右下に子要素を配置する
.red-box {
    position: relative;
}

.yellow-box {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
}

.red-box {
    position: relative;
}

.yellow-box {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 100px;
    height: 100px;
}

.red-box {
    position: relative;
}

.yellow-box {
    position: absolute;
    bottom: 200px;
    left: 100px;
    width: 100px;
    height: 100px;
}

■少し特殊な上下左右中央揃え

上からちょうど真ん中の場所に移動させたい場合はどのようにCSSをかけば良いと思いますか？

半分の位置だからtop: 50%;と指定すればいけそうと思いましたか？ これを実際に指定してみると、、、

子要素の上辺がtopから50%の位置に来てしまいます、、、 これだと真ん中の位置からズレて配置されてしまっています

本当の半分の位置にするためにはtransform: translateY(-50%);という指定を追加でする必要があり、そのコードを書き足すと