Css警报不在顶部

Question

我正试图让一些警示标志相互叠加，但除了一切之外，我设法将其作为通知进入顶部但是当我有多个警报时，我会在其他

这是我的css

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  top: 10%;
  right: 16px;
  vertical-align: bottom;
  position: fixed;
  z-index: 999999999 !important;

.alert.success {
  background-color: #4CAF50;
}

.alert.warning {
  background-color: #ff9800;
}

和我的HTML

@foreach($errors->all() as $error)
    <div class="alert">
        <span class="closebtn">&times;</span>
        <strong>{{$error}}</strong>
    </div>
@endforeach

Answer 1

制作一个具有固定位置的容器，然后将警报添加到其中。

结果：

.alert-container {
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  top: 10%;
  right: 16px;
  vertical-align: bottom;
  position: fixed;
  z-index: 999999999 !important;
}
.alert{
  padding: 20px;
  position:relative;
  display:block;
  width:100px;
  height:10px;

}
.success {
  background-color: #4CAF50;
}
.warning {
  background-color: #ff9800;
}

<div class="alert-container">
  <div class="alert success">success!</div>
  <div class=" alert warning">warning</div>
</div>

Answer 2

扩展J. Titus的评论

z-index仅适用于定位元素。如果元素不是 static，relative或absolute，则会将其定位。由于.alert具有position: fixed，因此z-index不执行任何操作。

以下是有关详细信息的链接 https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

通过将警报包装在容器中，您可以在保持容器固定的同时为警报提供z-index。