position absolute element is underneath other element

<section className={styles.SnScontainer}>
      <div className={styles.searchBoxContainer}>
        <div className={styles.searchBox}>
          <img src={search} alt='search' />
          <input type='text' placeholder='Search by Product Name' />
        </div>
      </div>
      <div className={styles.sortBox}>
        <div className={styles.sortOptionsContainer}>
          <button
            onClick={() => {
              setView("grid");
            }}
            className={`material-symbols-outlined  ${gridView ? styles.filled : styles.unfilled} `}>
            grid_view
          </button>
          <button
            onClick={() => {
              setView("list");
            }}
            className={`material-symbols-outlined ${gridView ? styles.unfilled : styles.filled} `}>
            view_list
          </button>
          <DropDown name={"Headphone type"} />
          <DropDown name={"Company"} />
          <DropDown name={"Colour"} />
          <DropDown name={"Price"} />
        </div>
      </div>
    </section>

   <div className={styles.dropDown}>
      <button
        onFocus={() => {
          setIsOpen(true);
        }}
        onBlur={() => {
          setIsOpen(false);
        }}
        className={styles.dropdownButtons}>
        {name} <span className='material-symbols-outlined'>expand_more</span>
      </button>
      {isOpen ? (
        <div open={isOpen} className={styles.dropDownMenu}>
          <ul className={styles.dropDownList}>
            {dropDownData && dropDownData.map((option, key) => <li key={key}>{option}</li>)}
          </ul>
        </div>
      ) : null}
    </div>