Vue и CSS3: абсолютная позиция в относительной обертке портит высоту

Question

Я новичок в Vue и изучаю тонкости CSS3

Я создаю компонент, который можно найти здесь: https://codesandbox.io/s/yjp674ppxj

Короче, у меня есть ulэлемент с относительным позиционированием, а затем список div элементов с абсолютным позиционированием, и я динамически вычисляю свойство top.

В идеале я хотел бы, чтобы текст отображался после всего списка.Однако при этом элемент ul теперь имеет высоту 0px.Как я могу сохранить высоту и сохранить тот же эффект?

ниже приведен чистый html5 & css3 MWE:

ul {
  position: relative;
  border: solid 1px coral;
}

li {
  position: absolute;
  top: calc(10px * var(--index));
  border: solid 0.5px black;
}

<ul>
<li style="--index:0">list item</li>
<li style="--index:1">list item</li>
<li style="--index:2">list item</li>
<li style="--index:3">list item</li>
<li style="--index:4">list item</li>

</ul>

<p>test that shoudl be after list</p>

Answer 1

Если вы хотите сохранить position: absolute, вы можете сделать следующее:

Обновите ListPerspective.vue :

  <ul class="mx-auto">
    <ListPerspectiveItem
      v-for="(alert, index) in alerts"
      :key="alert.id"
      :index="index"
      :alert="alert"
      :totalElements="alerts.length"
      :verticalShift="15"
      @close="remove(index)"
    />
    <div :style="notificationMsg"><slot></slot></div>
  </ul>

Добавляя элемент списка в конце. Также добавьте вычисляемый стиль, то есть:

  data() {
    return { verticalShift: 15 }
  },
  computed: {
    notificationMsg() {
      return `position: absolute; top: ${(this.alerts.length + 1) * this.verticalShift}px; margin-top: 20px;`;
    }
  }

Вы рассчитываете общее расстояние от вершины компонента, которое необходимо для отображения вашего сообщения под уведомлениями.

К сожалению, для этого требуется, чтобы вы определили verticalShift в своем родительском (ListPerspective) компоненте и передали его в качестве опоры ListPerspectiveItem . Если бы я был тобой, я бы создал простое хранилище с такими базовыми конфигурациями и вместо жесткого кодирования 15 в качестве значения по умолчанию в вашем ListPerspectiveItem Я бы взял его из хранилища, делать то же самое в ListPerspective компоненте, то есть:

data() { 
// generally you should bind store state properties as computed properties, 
// but since it's a default, constant variable you shouldn't have to watch for it's changes
  return { verticalShift: this.$store.state.defaults.css.verticalShift }
}


verticalShift: {
  type: Number, default: this.$store.state.defaults.css.verticalShift
}

Последнее, что осталось сделать, это обновить App.vue , добавив ваше сообщение в слот:

  <ListPerspective>
      Click the &times; button to remove a message
  </ListPerspective>

* +1032 * Пример * +1034 *

Answer 2

Вместо position:absolute вы можете рассмотреть margin-top

ul {
  position: relative;
  border: solid 1px coral;
  padding-top:8px;
}

li {
  margin-top: -8px;
  border: solid 0.5px black;
  transition:0.5s all;
}
li:hover {
  margin-top:-12px;
  margin-bottom:4px;
}

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>

</ul>

<p>test that shoudl be after list</p>

UPDATE

Вы также можете рассмотреть преобразование при наведении:

ul {
  position: relative;
  border: solid 1px coral;
  padding-top:8px;
}

li {
  margin-top: -8px;
  border: solid 0.5px black;
  transition:0.5s all;
}
li:hover {
  transform:translateY(-5px);
}

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>

</ul>

<p>test that shoudl be after list</p>