使警报框重叠内容

Question

我尝试让警报框在我的内容上重叠，但每次它总是显示并下推我的内容。 我在其他任何地方都没有 z-index 也可以更改所有绝对、相对和固定的位置，但没有任何工作一次它正在工作，然后当我保存它时它就消失了。 这是我的代码。

return (
    <Alert
      dismissible
      show={this.state.show}
      variant={variant}
      onClose={this.handleClose}>
      <div className='container'>
        <Alert.Heading>{heading}</Alert.Heading>
        <p className='alert-body'>{message}</p>
      </div>
    </Alert>
  )
}
}

.alert {
  align-items: center;
  animation: .5s ease-in-out 0s 1 light-bounce-in;
  bottom: 1rem;
  display: flex;
  // left: 0;
  margin: auto;
  max-width: 30rem;
  position: absolute;
  top: 30px;
  left: 20px;
  right: 20px;
  // right: 0;
  z-index: 1;

  .alert-body {
    margin: auto 0;
  }
}

.close {
  &:active,
  &:focus {
    outline: none;
  }
}

@keyframes light-bounce-in {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }

  50% {
    transform: translateY(-5%);
  }

  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

Answer 1

z-index: 1 似乎是一个低值。试试z-index: 100 或z-index: 1000 或更多。我也会检查类的名称。