如何实现Alert提示框悬浮覆盖内容而非将页面内容向下挤开

问题核心原因 #

Alert元素未脱离正常文档流，或是你写的自定义样式优先级不够，被UI库自带的默认样式覆盖导致position设置未生效，因此Alert显示时会撑开父容器，挤动下方内容。你之前修改后正常、保存后恢复异常，基本都是打包后样式加载顺序变化，自定义样式被UI库样式覆盖导致的。

解决方案 #

• 第一步先验证样式是否生效：打开浏览器开发者工具，选中Alert元素查看「计算样式」中的position属性，确认是否是你设置的absolute/fixed，如果不是就是样式被覆盖了。
• 优先使用fixed定位：position: absolute是相对于最近的非static定位父元素，若父元素滚动或位置变化会影响Alert位置，position: fixed直接相对于浏览器视口，完全脱离文档流，不会占用页面高度挤动其他内容。
• 提高样式优先级：可以给自定义样式选择器增加权重，或者直接加!important临时验证，z-index也可以适当提高避免被其他元素遮挡。
• 调整组件挂载位置：如果Alert放在了带overflow: hidden属性的父容器内部，可能会出现定位异常，直接把Alert组件放到根组件最外层，和页面主内容容器同级即可。

修改后的代码示例 #

CSS调整 #

.alert {
  align-items: center;
  animation: .5s ease-in-out 0s 1 light-bounce-in;
  bottom: 1rem;
  display: flex;
  margin: auto;
  max-width: 30rem;
  /* 改为fixed定位直接相对于视口 */
  position: fixed;
  top: 30px;
  left: 20px;
  right: 20px;
  /* 提高z-index和优先级，避免被覆盖 */
  z-index: 9999 !important;

  .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%);
  }
}

应急验证方案：直接加内联样式 #

如果不想调整CSS优先级，可以直接给Alert组件加内联样式，优先级最高不会被覆盖：

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

内容的提问来源于stack exchange，提问作者gifty08