Как сделать так, чтобы блок в новом положении не опускался в низ?

Ирина Чернова, у вас он идет в этом ?

Как сделать так, чтобы блок в новом положении не опускался в низ?

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

Как сделать так, чтобы блок в новом положении не опускался в низ?

Ирина Чернова,
исправил , но они также идут лесенкой (

Как сделать так, чтобы блок в новом положении не опускался в низ?

Ирина Чернова, так вроде бы есть display: flex

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

Как сделать так, чтобы блок в новом положении не опускался в низ?

Это из-за css или vue они смещаются ?

Как сделать так, чтобы блок в новом положении не опускался в низ?

Как сделать так, чтобы блок в новом положении не опускался в низ?

Должно получится как на этой картинке сверху , а у меня получается как с низу

Как сделать так, чтобы блок в новом положении не опускался в низ?

Смотрите , когда я нажимаю на кнопку Items , появляется нотификация, после этого я нажимаю на кнопку Chageposition у меня новая нотифайка уже будет расположена в другом месте , но почему-то первая нотифайка уходит в низ второй нотифайки , хотя должна стоять на том же месте

Как пользователь может сам задать длительность анимации?

Александр, Благодарю за помощь

Как пользователь может сам задать длительность анимации?

Александр, не сильно пойму как это написать , у меня получается в кнопке да клика

<button v-on:click="change" @click="show = !show" v-if="animation">Change</button>

А для секции я должен добаить v-show

<section class="first-item" v-show = "show" v-bind:style="{ animation: fadeOut }">

или как ?

Как пользователь может сам задать длительность анимации?

Александр, прочитал то , что вы скинули и как я понял , я должен сделать @click которая будет добавлять ?

v-bind:style="{ animation: runProgress }" или v-bind:style="{ animation: fadeOut}"

Как пользователь может сам задать длительность анимации?

Александр, я понял в чем проблема , допустим я задаю анимацию в районе 3 секунд , у меня она до нажатии на кнопку в невидимости уже происходит , то есть , если я допустим напишу время анимации после обновление страницы через 8 секунд , задам анимацию в в районе 10 секунд у меня выводится анимация которая была проиграна уже 8 секунд , как это можно пофиксить , чтобы анимация начиналась по нажатию , а не после обновления страницы ?

Как пользователь может сам задать длительность анимации?

Александр,

<div class="first-item__progress" v-bind:style="{ animation: runProgress }"></div>

Добавил и все получилось , только не могу понять , у меня эта линия когда я допустим задал 20 в input , появляется где-то может в районе 15% , а не с самого начала , из-за чего это связано ?

Как пользователь может сам задать длительность анимации?

<section class="first-item" v-bind:style="{ animation:  runProgress }">

Оставил только эту анимацию, и у меня увеличивается полоса и сам блок в течении заданного мной времени

Как пользователь может сам задать длительность анимации?

Работает , только столкнулся с проблемой , что если изменить один раз и допустим потом заменить второй раз , то время не применяется ,а теперь столкнулся с проблемой , у меня время должно это же задаваться , для белой линии и самого блока , то есть для fadeOut, runProgress , указал я их

html
<button v-on:click="change">Change</button>
<section class="first-item" v-bind:style="{ animation: fadeOut, runProgress }">
vue
var app = new Vue({
  el: '#app',
  data: {
  value: null,
  fadeOut: null,
  runProgress: null
  },
 methods: {
   change: function () {
   this.fadeOut = `fadeOut ${this.value}s linear forwards`,
   this.runProgress = `runProgress ${this.value}s linear forwards`
   }
 }
});

эффект не применяется для белой линии прогресса , а эта линия просто стоит на месте

Как пользователь может сам задать длительность анимации?

исправил , но длительность так и не поменялась (

Сделать первый элемент при открытии страницы активным, смена фото по нажатиям на слова?

const app = new Vue({
  el: '#gettosklad',
  data: {
    active_el: 0,
    images:0,
    images: [
      'img/money.svg',
      'img/heal.svg',
      'img/narko.svg',
      'img/gun.svg',
      'img/gunmatirials.svg'
    ]
  },
  methods:{
    activate:function(el){
        this.active_el = el;
    }
  }
});

Добавил так , но все равно что-то не переключаются

Сделать первый элемент при открытии страницы активным, смена фото по нажатиям на слова?

Насчет вашего кода , не сильно понял , как он работает и куда его надо пихать у меня в коде (

Сделать первый элемент при открытии страницы активным, смена фото по нажатиям на слова?

Да , вы верно подметили - это верстка для гта ) , с первым вопросом разобрался