Css Alerts Not On Top

I'm trying to make some alert signs to go on top of one another, but on top of everything, I manage to make it to the top like a notification but when I have multiples alerts one g

Solution 1:

To expand on J. Titus's comment,

z-index only works on positioned elements. An element is considered positioned if it is not static, relative, or absolute. Since .alert has position: fixed, the z-index does nothing.

Here is a link for full details on that https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

By wrapping your alert in a container, you can give the alert a z-index while keeping the container fixed.

Solution 2:

Make a container that has the fixed position on it, then add the alerts to it.

Outcome:

.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>