z-indexが効かなかった問題

こんな感じでfont awesomeが下に行ってました。

原因

こちらの記事を参考に。

CSSでz-indexが効かない時の4つの原因とその対応方法

.bg {
    width: 100%;
    /* height: 100vh; */
    background: rgb(4, 101, 130);
    background: linear-gradient(180deg, rgba(4, 101, 130, 1) 0%, rgba(110, 117, 130, 1) 20%, rgba(159, 124, 130, 1) 38%, rgba(187, 128, 130, 1) 51%, rgba(200, 111, 99, 0.9334003865217962) 57%, rgba(211, 96, 74, 0.8493667730764181) 62%, rgba(217, 118, 59, 0.9025880615918243) 68%, rgba(225, 112, 42, 0.8213555685946253) 75%, rgba(237, 137, 37, 0.8101510868019083) 80%, rgba(253, 176, 31, 0.6308793781184349) 87%, rgba(255, 209, 168, 0.009) 98%);
    box-sizing: border-box;
    /* 🥰🥰🥰🥰🥰🥰🥰 */
    opacity: .8;
    animation: bg-change 10s linear infinite;

}

.bgでopacityを指定していたからでした。

前にできました😊😊