Select input below sticky header comes over header on scrolling

I made a sticky header at top, with top-8 class being used to get some space between top of page and the header. On scrolling, the header stays fixed in place, and the content underneath it is scrolled.

All of the content below the header is being hidden nicely on scrolling, but these select input elements are not. I took a closer look and it's because I used custom styling for the select element to get that arrow icon. I set the container as relative, and then absolutely positioned the arrow inside it on the right side.

This is my code for the Header component:

<div className='w-full bg-[#121A28] sticky top-0 min-h-[105px]'>
      <header className="relative top-8 rounded-[6px] bg-custom-gray-quarternary border border-custom-gray-primary text-white py-[14px] px-6 max-w-screen-lg mx-auto flex justify-between items-center">
        <div className='flex items-center gap-[12.92px]'>
          <Image src={DeltaTestLogoIcon} alt='Logo of DeltaTest' className='h-[28px] w-[24.64px]' />
          <Image src={DeltaTestLogoTitle} alt='Name of DeltaTest written with stylish text' className='h-[16.64px] w-[90.47px]' />
        </div>
        ......other content
      </header>
    </div>

This is my code for the select element:

   <div className='relative flex w-full'>
      <select name={name} id={id} className={`w-full appearance-none ${style}`}>
        {
          options.map((option) => (
            <option key={option.value} value={option.value} className={optionStyle}>
              {option.label}
            </option>
          ))
        }
      </select >
      <div className='absolute right-7 h-full flex flex-col justify-center'>
        <Image src={DownwardChevron} alt='A downwards facing arrow' className='' />
      </div>

    </div>

I have tried setting position of header to fixed. I have tried setting a z-index of 100 to the header and 0 to the select element, but all these options are not working.

Problem solved. I used the below CSS to get an arrow through background image instead of wrapping the select input and the arrow inside a relatively positioned container.

.select-pill-custom-arrow {
  background-image: url("/icons/chevron-down-single.svg");
  background-repeat: no-repeat;
  background-position: right 28px top 50%;
  background-size: 24px 24px;
}

Then I moved on to change my custom select input pill component to this:

  <select name={name} id={id} className={`select-pill-custom-arrow w-full appearance-none ${style}`}>
      {
        options.map((option) => (
          <option key={option.value} value={option.value} className={optionStyle}>
            {option.label}
          </option>
        ))
      }
    </select >

This solved the problem for me.