Блок заходит на блок, а не опускается ниже

Question

Не могу понять из-за чего , следующие блоки , не опускаются в низ , а идут в первый блок ?

new Vue({
  el: '#app',
  data() {
    return {
      messages: []
    }
  },
  methods: {
    changeItemss() {
      let timeStamp = Date.now().toLocaleString();
            this.messages.unshift(
              {id: timeStamp}
            )
    }
  }
})

.w {
  position: fixed;
  top: 40px;
  right: 16px;
}
.block {
  position: fixed;
  top: 80px;
  right: 16px;
  height: 20px;
  width: 150px;
  background-color: green;
  margin-bottom: 20px;
  &__messages_list {
    display: flex;
    flex-direction: column-reverse;
  }
}

.fade { 
  &-enter {
    transform: translateX(120px);
    opacity: 0;
  }
  &-enter-active {
    transition: all .6s ease;
  }
  &-enter-to {
    opacity: 1;
  }
  &-leave {
    height: 20px;
    opacity: 1;
  }
  &-leave-active {
    transition: transform .6s ease, opacity .6s, height .6s .2s;
  }
  &-leave-to {
    height: 0;
    transform: translateX(120px);
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <button class="w" @click="changeItemss">Items</button>
      <transition-group name="fade" class="messages_list">
        <div class="block" v-for="message in messages"
        :key="message.id">
        <span>{{message.id}}</span>
      </div>
      </transition-group>
    </div>

Answer 1

Пример

new Vue({
  el: '#app',
  data() {
    return {
      messages: []
    }
  },
  methods: {
    changeItemss() {
      let timeStamp = Date.now().toLocaleString();
      this.messages.unshift({
        id: timeStamp
      })
    }
  }
})

.w {
  position: fixed;
  top: 40px;
  right: 16px;
}

.messages_list {
  display: flex;
  flex-direction: column-reverse;
  position: fixed;
  top: 80px;
  right: 16px;
}

.block {  
  height: 20px;
  width: 150px;
  background-color: green;
  margin-bottom: 20px;  
}

.fade {
  &-enter {
    transform: translateX(120px);
    opacity: 0;
  }
  &-enter-active {
    transition: all .6s ease;
  }
  &-enter-to {
    opacity: 1;
  }
  &-leave {
    height: 20px;
    opacity: 1;
  }
  &-leave-active {
    transition: transform .6s ease, opacity .6s, height .6s .2s;
  }
  &-leave-to {
    height: 0;
    transform: translateX(120px);
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button class="w" @click="changeItemss">Items</button>
  <transition-group name="fade" class="messages_list">
    <div class="block" v-for="message in messages" :key="message.id">
      <span>{{message.id}}</span>
    </div>
  </transition-group>
</div>

БЛОГ НА HUSL

Блок заходит на блок, а не опускается ниже

Ответы (1 шт):