my scrollbar with pictures is covering my marquee plz help

how do i make my marquee be on top???

 here is the code for the scrollbar i use

<style>

        .scroll {

            max-width: 600px;

            height: 250px;

            overflow-x: auto;

            overflow-y: hidden;

            white-space: nowrap;

            border: 0px solid #ddd;

        }

</style>

<div class="scroll">

<!----- https://youtu.be/H6tCME66GlU?si=lGzY7M8GfeBNw0Pm ----->

<style>

@vinyl-gallery * {

     all: unset;

   }

  #vinyl-gallery {

    all: initial!important;

    width: 100%!important;

    height: 230px!important;

    margin: 30px 0!important;

    display: flex!important;

    flex-direction: row!important;

    position: relative!important;

    margin-left: -6px!important;

  }

  #vinyl-gallery .vinyl {

      all:unset!important;

    perspective: 500px !important;

    width: 18px!important;

    transition: width 0.5s!important;

  }

  #vinyl-gallery .vinyl:hover {

    width: 148px!important;

  }

  #vinyl-gallery img {

      all:unset!important;

    transition: transform 0.5s, width 0.5s, heigth 0.5s, margin-top 0.5s!important;

    width: 180px!important;

    height: 180px!important;

    transform: rotateX(0deg) rotateY (25deg)!important;

    transform-style: 4px!important;

    border-radius: 4px!important;

    border: 2px solid rgba(0, 0, 0, 0.1)!important;

object-fit: cover!important;

  }

  #vinyl-gallery .vinyl:hover img {

    transform: rotateX(0deg) rotateY(10deg)!important;

    width: 188px!important;

    height: 188px!important;

    margin-top: -2px!important;

  }

  #vinyl-gallery .title {

    color: #000000;

    display: block;

    visibility: hidden;

    position: absolute;

    bottom: 0px;

    text-align: center;

    width: 100%;

    padding-left:6px;

  }

  #vinyl-gallery .vinyl:nth-child(n):hover +.title {

    visibility: visible;

  }

</style>

<div id="vinyl-gallery">

  <div class="vinyl">

    <img src=""/>

    <div class="title">Artist - Album</div>

  </div>

</div></div>

here is the code i use for the marquee

<div style="width: 1525px; height:100px; background-color: black; border: 0px solid #FFFFFF80; overflow: hidden; position: fixed; left:0px; bottom:0px;">

  <div style="display: flex; width: max-content; animation: bounceScroll 160s ease-in-out infinite;">

<!--ADD YOUR IMAGE LINKS BELOW.-->

<!--title-->

    <img src="" width="100" height="100" alt="Natural"/>

<!--theres more pictures but i shortened it-->

<style>

  @keyframes bounceScroll {

    0% { transform: translateX(0); }

    50% { transform: translateX(-164%); }

    100% { transform: translateX(0); }

  }

</style></div></div>