Как я могу принести элемент Infront в режиме смешивания смеси?

Question

Кто-нибудь может мне помочь? смесь смесь влияет на мою навигационную панель и изображение обуви. Я хочу вывести их на фронт. Я пробовал с осью z, но она не работает.

<section>
    <img src="slike/bg.jpg" id="bg">
    <img src="slike/moon.png" id="moon">
    <img src="slike/mountain.png" id="mountain">
    <img src="slike/road.png" id="road">
    <img src="slike/road.png" id="road">
    <img src="slike/Untitled-1.png" id="shoe">
    <h1 id="text">AIRMAX</h1>
</section>

section{
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   display: flex;
   align-items: center;

}
section:before{
   content: '';
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 100px;
   background: linear-gradient(to top, #0a2a43, transparent);
   z-index: 10000;

}

section:after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #0a2a43;
   z-index: 10000;
   mix-blend-mode: color;

}

section img{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   pointer-events: none;
}
#text{
   position: relative;
   color: #fff;
   font-size: 10em;
   z-index: 2;
   text-align: center;
   padding: 100px;
   font-family: 'Nunito', sans-serif;
}

#road{
   z-index: 2;
}

Я сделал эффект параллакса, поэтому у меня есть 5 изображений, наложенных друг на друга в режиме смешивания. Шестая картинка «Без названия-1» должна быть поверх этого режима наложения. Я не знаю, возможно ли это, поэтому я пришел сюда за помощью. Режим наложения также влияет на мою навигационную панель, но навигационная панель находится за пределами раздела, в котором есть мягкий режим.