Как избавиться от кнопок в родительском компоненте, когда выпадающее меню отображается в CSS?

Question

Я создал раскрывающееся меню, показанное ниже, и всякий раз, когда оно отображается, кнопки под ним все еще активны / видимы. Как сделать так, чтобы выпадающее меню было самым верхним слоем? частично видимые кнопки с многоточием - это не то, что мне нужно.

Dropdown.jsx

const Dropdown = props => {
  const [showOptions, setShowOptions] = useState(false);

  const toggleOptions = e => {
    e.preventDefault();
    setShowOptions(!showOptions);
  }

  const buttonLabel = (<i className='fa fa-ellipsis-v' />)

  return (
    <div className='employees-li-options'>
      <FormButton
        label={buttonLabel}
        id='employees-li-options-button'
        type='button'
        onClick={toggleOptions}
        />
      {
        showOptions ? (
          <div className='employees-li-options-visible'>
            <FormButton
              type='button'
              label='active'
              />
            <FormButton
              type='button'
              label='inactive'
              />
            <FormButton
              type='button'
              label='deactivated'
              />
            <FormButton
              type='button'
              label='invite pending'
              />
          </div>
        ) : (
          null
        )
      }
    </div>
  )
};

css

.employees-li-options-visible {
  position: absolute;
  background-color: $white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: space-evenly;
  border-radius: 10px;
  box-shadow: 0 0 5px 1px $light-gray1; 
  padding: 1em 1em 0.1em 1em;
}

Answer 1

Вы можете использовать CSS. Просто добавьте стиль z-index к родительскому ИЛИ к самому раскрывающемуся списку. Родительский элемент должен оставаться видимым за выпадающим списком. z-index .

// To the parent
#parent {
    z-index: -1;
}

// To the dropdown
.employees-li-options-visible {
    z-index: 1000;
}