Как избавиться от смещения блоков ul-li drop-down меню?

Есть drop-down меню:

Scss:

#select-li {
  cursor: pointer;
  padding: 8px;
  font-size: 15px;
  border-bottom: 0.1px solid rgba(0, 0, 0, .1);
}
#select-ul {
  cursor: pointer;
  border: 0.1px solid rgba(0, 0, 0, .1);
  border-top: 0;
  background-color: white;
  padding: 12px;
  height: 300px;
  overflow: auto;
  float: none;
  overflow-y:scroll;
  flex-wrap: wrap;
}

HTML:

<ul v-if="showSortBy" id="select-ul">
<li
  id="select-li"
  @click="defCountry = country; showSortBy = !showSortBy"
  v-for="country in countries"
  :key="country.key"
>
  <img :src="country.src" width="18" height="18" alt="">
  {{country.val}}
</li>
</ul>

А выглядит всё вот так:

Как сделать так, чтобы это меню было поверх блоков, а не смещало их?

Всем спасибо за ответы!