按钮下拉菜单是分层在我的工作板组件的移动

Question

构建了一个带有过滤器的作业板，其中一些过滤器有下拉菜单。在桌面上，下拉菜单是在职务板组件上分层的。在手机上，它落在它后面。有谁知道解决办法吗？

Github：https://github.com/shaunsmerling/ecomjobs

移动视图下拉列表落在组件后面

Global.css

@tailwind components;
@tailwind utilities;

.bold {
  color: #0061ff !important;
}



#emailsubmit {
width: 500px;
max-width: 100%;
height: 50px;

}

#emailbtn {
  height: 50px;
}

#catfilter {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}


.modal {
  font-size: 12px;
  background-color: rgb(88, 101, 122);
  width: auto;
  margin-top: 2px;
  overflow: scroll;
  

  
}



.close {
  cursor: pointer;
  position: absolute;
  display: block;
  padding: 2px 5px;
  line-height: 20px;
  margin-top: 24px;
  margin-left: 20px;
  top: -10px;
  font-size: 24px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #cfcece;
}

#jobbtn {
  width: 100%;
}

#submit {
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }


.modal > .header {
  font-size: 24px;
  text-align: center;
  padding: 5px;
}




.App {
  text-align: center;
}

h1 {
  font-size: 60px !important;
  font-weight: bold;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Filters.js

import React, {useEffect} from "react"
import LocFilter from "./LocFilter"
import ConFilter from "./ConFilter"



function FuncFilter({setActiveCategory, activeCategory, activeLocation, setActiveLocation, activeContract, setActiveContract, setFiltered, jobs}) {
  

  useEffect(() => {
    if (activeCategory === "all") {
      setFiltered(jobs)
      return
    }
    if (activeCategory !== 1) {
    const filtered = jobs.filter((job) => job.category.includes(activeCategory))

    setFiltered(filtered)
    }

  }, [activeCategory])


const obj = jobs.map(function(job) {
  return job.category
})

function markCategory() {
  const marketingCount = []
  for (const jobCat of obj) {
    if (jobCat === "Marketing") {
      marketingCount.push(jobCat)
    }
    }

  return marketingCount.length
}


function cusCategory() {
  const cusCount = []
  for (const jobCat of obj) {
    if (jobCat === "Customer Service") {
      cusCount.push(jobCat)
    }
    }

  return cusCount.length
}


function creativeCategory() {
  const creativeCount = []
  for (const jobCat of obj) {
    if (jobCat === "Creative") {
      creativeCount.push(jobCat)
    }
    }

  return creativeCount.length
}



function webCategory() {
  const webCount = []
  for (const jobCat of obj) {
    if (jobCat === "Web Development") {
      webCount.push(jobCat)
    }
    }

  return webCount.length
}



function salesCategory() {
  const salesCount = []
  for (const jobCat of obj) {
    if (jobCat === "Sales") {
      salesCount.push(jobCat)
    }
    }

  return salesCount.length
}

function peopleCategory() {
  const peopleCount = []
  for (const jobCat of obj) {
    if (jobCat === "People & HR") {
      peopleCount.push(jobCat)
    }
    }

  return peopleCount.length
}

function opsCategory() {
  const opsCount = []
  for (const jobCat of obj) {
    if (jobCat === "Biz Ops") {
      opsCount.push(jobCat)
    }
    }

  return opsCount.length
}

function finCategory() {
  const finCount = []
  for (const jobCat of obj) {
    if (jobCat === "Finance") {
      finCount.push(jobCat)
    }
    }

  return finCount.length
}

function prodCategory() {
  const prodCount = []
  for (const jobCat of obj) {
    if (jobCat === "Product") {
      prodCount.push(jobCat)
    }
    }

  return prodCount.length
}


function proCategory() {
  const proCount = []
  for (const jobCat of obj) {
    if (jobCat === "Product") {
      proCount.push(jobCat)
    }
    }

  return proCount.length
}

const resetLocation = event => {
  setActiveLocation(1);
};

const resetContract = event => {
  setActiveContract(1);
};


  //1. Marketing DONE
  // 2. Biz Ops DONE
  // 3. Sales DONE
  // 4. Finance DONE
  // 5. Product
  // 6. Web Development DONE
  // 7. Creative DONE
  // 8. People & HR DONE
  // 9. Customer Service DONE



  return (
    <div className="flex overflow-x-scroll pb-6 -mt-20">
      <button id="catfilter" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
       onClick={() => setActiveCategory("all")}>All</button>
      <button id="catfilter" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      onClick={() => {resetLocation(); resetContract(); setActiveCategory("Marketing");}}>Marketing ({markCategory()}) </button>
      <button id="catfilter" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      onClick={() =>  {resetLocation(); resetContract(); setActiveCategory("Customer Service");}}>Customer Service ({cusCategory()})</button>
      <button id="catfilter" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      onClick={() =>  {resetLocation(); resetContract(); setActiveCategory("Creative");}}>Creative ({creativeCategory()})</button>
      <button id="catfilter" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      onClick={() =>  {resetLocation(); resetContract(); setActiveCategory("Web Development");}}>Web Development ({webCategory()})</button>
      <button id="catfilter" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      onClick={() => {resetLocation(); resetContract(); setActiveCategory("People & HR");}}>People & HR ({peopleCategory()})</button>
      <button id="catfilter" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      onClick={() =>  {resetLocation(); resetContract(); setActiveCategory("Sales");}}>Sales ({salesCategory()}) </button>
      <button id="locfilter" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      onClick={() =>  {resetLocation(); resetContract(); setActiveCategory("Biz Ops");}}> Biz Ops ({opsCategory()}) </button>
      <button id="catfilter" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      onClick={() =>  {resetLocation(); resetContract(); setActiveCategory("Product");}}> Product ({prodCategory()}) </button>
      <button id="catfilter" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      onClick={() =>  {resetLocation(); resetContract(); setActiveCategory("Finance");}}>Finance ({finCategory()}) </button>
      <button id="catfilter" className="hidden text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      onClick={() =>  {resetLocation(); resetContract(); setActiveCategory("Product");}}> Product ({proCategory()}) </button>
      <LocFilter 
      jobs={jobs} 
      setFiltered={setFiltered} 
      activeLocation={activeLocation}
      setActiveLocation={setActiveLocation}
      activeCategory={activeCategory}
      setActiveCategory={setActiveCategory}
      activeContract={activeContract}
      setActiveContract={setActiveContract}
       />
      <ConFilter 
      jobs={jobs} 
      setFiltered={setFiltered} 
      activeLocation={activeLocation}
      setActiveLocation={setActiveLocation}
      activeCategory={activeCategory}
      setActiveCategory={setActiveCategory}
      activeContract={activeContract}
      setActiveContract={setActiveContract}

      />
      </div>
      
    
  )
}

export default FuncFilter

Location.js (构建下拉菜单的地方)

import React, {useEffect} from "react"
import { Fragment } from 'react'
import { Menu, Transition } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/solid'

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}



function LocFilter({setActiveLocation, activeLocation, activeCategory, setActiveCategory, activeContract, setActiveContract, setFiltered, jobs}) {

  useEffect(() => {

    const filtered = jobs.filter((job) => job.location.includes(activeLocation))

    setFiltered(filtered)

  }, [activeLocation])


  const resetContract = event => {
    setActiveContract(1);
  };
  
  const resetCategory = event => {
    setActiveCategory(1);
  };
  
  

  return (
    <Menu id="catfilter" as="div" className="mb-20 relative inline-block text-left">
    <div>
      <Menu.Button
      className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
        Locations
        <ChevronDownIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
      </Menu.Button>
    </div>

    <Transition
        as={Fragment}
        enter="transition ease-out duration-100"
        enterFrom="transform opacity-0 scale-95"
        enterTo="transform opacity-100 scale-100"
        leave="transition ease-in duration-75"
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >

        <Menu.Items className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
          <div className="py-1">
            <Menu.Item>
              {({ active }) => (
                <a
                // active category cannot be 0
                //  if active category is a category, it works to select a location filter
                // you cannot click that exact category  right after though, as AC is labeled as that category
                  onClick={() => {resetCategory(); resetContract(); setActiveLocation("USA"); }} 
                  className={classNames(
                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                    'block px-4 py-2 text-sm'
                  )}
                >
                  USA
                </a>
                )}
            </Menu.Item>
            <Menu.Item>
              {({ active }) => (
                <a
                  onClick={() =>  {resetCategory(); resetContract(); setActiveLocation("Asia");}}
                  className={classNames(
                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                    'block px-4 py-2 text-sm'
                  )}
                >
                  Asia
                </a>
                )}
            </Menu.Item>
            <Menu.Item>
              {({ active }) => (
                <a
                  onClick={() =>  {resetCategory(); resetContract(); setActiveLocation("Europe");}}
                  className={classNames(
                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                    'block px-4 py-2 text-sm'
                  )}
                >
                  Europe
                </a>
                )}
            </Menu.Item>
            <Menu.Item>
              {({ active }) => (
                <a
                // active category cannot be 0
                //  if active category is a category, it works to select a location filter
                // you cannot click that exact category  right after though, as AC is labeled as that category
                  onClick={() => {resetCategory(); resetContract(); setActiveLocation("Australia"); }} 
                  className={classNames(
                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                    'block px-4 py-2 text-sm'
                  )}
                >
                  Australia
                </a>
                )}
            </Menu.Item>
            <Menu.Item>
              {({ active }) => (
                <a
                // active category cannot be 0
                //  if active category is a category, it works to select a location filter
                // you cannot click that exact category  right after though, as AC is labeled as that category
                  onClick={() => {resetCategory(); resetContract(); setActiveLocation("Canada"); }} 
                  className={classNames(
                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                    'block px-4 py-2 text-sm'
                  )}
                >
                  Canada
                </a>
                )}
            </Menu.Item>
            <Menu.Item>
              {({ active }) => (
                <a
                // active category cannot be 0
                //  if active category is a category, it works to select a location filter
                // you cannot click that exact category  right after though, as AC is labeled as that category
                  onClick={() => {resetCategory(); resetContract(); setActiveLocation("Remote"); }} 
                  className={classNames(
                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                    'block px-4 py-2 text-sm'
                  )}
                >
                  Remote
                </a>
                )}
            </Menu.Item>
          </div>
        </Menu.Items>
      </Transition>
    </Menu>
  )
}

export default LocFilter

Answer 1

由于这是一个重叠的问题，您可以选择" select“元素并在移动上增加其z索引：

@media only screen and (min-width: [your-break-point])
select { 
    z-index:100;
       }