html - Aligning toast messages in javascript

Question

I'm working on a Toast message setup where, if multiple messages are active, they're not visible except for the one in the front (so maybe a margin of 15px between them would help) and display them on the bottom-corner of the screen (fixed), which doesn't change position when scrolling and make them disappear after 3 secs one by one. How do I go about solving this with JavaScript?

//dont't know how to get this working

let margin = 10;
function myFunction() {
  var type = document.getElementById("toast-" + type);
  type = "success", "info", "warning", "error";
  setTimeout(function(){ 
    margin += toast.clientHeight + 5;
  }, 3000);
}

.color-green{
  bottom: 0;
  position: absolute;
  background-color: #40ff00;
  box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
  margin-left: 15px;
  z-index: 4;
  border-radius: 4px;
  padding-left: 0.4em;

}

.color-blue{
  bottom: 0;
  position: absolute;
  background-color: #0000ff;
  box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
  margin-left: 15px;
  z-index: 4;
  border-radius: 4px;
  padding-left: 0.4em;

}

.color-orange{
  bottom: 0;
  position: absolute;
  background-color: #ffbf00;
  box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
  margin-left: 15px;
  z-index: 4;
  border-radius: 4px;
  padding-left: 0.4em;
}

.color-red{
  bottom: 0;
  left: 0;
  position: absolute;
  background-color: #ff0000;
  border-radius: 4px;
  box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
  margin-left: 15px;
  z-index: 4;
  padding-left: 0.4em;

}

.color-white{
  width: 100%;
  background-color: white;
  font-family: "Source Sans Pro";
  padding: 5px;
  z-index: 5;
  text-align: left;
  display: flex;
  justify-content: space-between;
  box-shadow: 2px 4px 16px 0 rgba(0, 0, 0, 0.40);
  border-radius: 0 4px 4px 0;
}

{% if messages %}
    {% for message in messages %}

        {% if message.tags == 'success' %}
            <div class="color-green" id="toast-success">
                <div class="color-white">
                    <div class="icon-success">
                        <i class="fas fa-check icon"></i>
                    </div>
                    <div class="text">
                        <h2>{{message}}</h2>
                    </div>
                </div>
            </div>

        {% elif message.tags == 'info' %}
            <div class="color-blue" id="toast-info">
                <div class="color-white">
                    <div class="icon-info">
                        <i class="fas fa-info icon"></i>
                    </div>
                    <div class="text">
                        <h2>{{message}}</h2>
                    </div>
                </div>
            </div>

        {% elif message.tags == 'warning' %}
            <div class="color-orange" id="toast-warning">
                <div class="color-white">
                    <div class="icon-warning">
                        <i class="fas fa-exclamation-circle icon"></i>
                    </div>
                    <div class="text">
                        <h2>{{message}}</h2>
                    </div>
                </div>
            </div>

        {% elif message.tags == 'error' %}
            <div class="color-red" id="toast-error">
                <div class="color-white">
                    <div class="icon-cross">
                        <i class="fas fa-times icon"></i>
                    </div>
                    <div class="text">
                        <h2>{{message}}</h2>
                    </div>
                </div>
            </div>
            
        {% endif %}
    {% endfor %}
{% endif %}

Answer 1

等待大神答复