Как сделать что бы элемент html было видно?

Question

[JoyRax]

Не могу понять почему элемент не видно, нигде не используются z-index'ы, пробывал их поставить но тоже не сработало

Вот как это выглядит в инспекторе

HTML

<template>
  <div class="NavBar_Menu">
    <div class="NavBar_Menu-button">
      <div class="NavBar_Menu-icon">
        <font-awesome-icon :icon="['fas', 'calendar-alt']" /> 
      </div>
    </div>
    <div class="NavBar_Menu-button">
      <div class="NavBar_Menu-icon">
        <font-awesome-icon :icon="['fas', 'inbox']" />
      </div>
    </div>
    <div class="NavBar_Menu-button">
      <div class="NavBar_Menu-icon" user-icon>
        <font-awesome-icon :icon="['fas', 'user-circle']" /> 
      </div>
      <div class="NavBar_Menu_Dopdown">
        123
      </div>
    </div>
  </div>
</template>

CSS

<style>
  .NavBar_Menu {
    width: 25%;
    height: 30px;
    display: flex;
    justify-content: flex-end;
  }
  .NavBar_Menu-button {
    width: 30px;
    margin: 0 5px;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
  }
  .NavBar_Menu-icon {
    font-size: 18px;
  }
  .NavBar_Menu-icon[user-icon] {
    font-size: 22px;
  }

  .NavBar_Menu_Dopdown {
    width: 200px;
    min-height: 200px;
    height: auto;
    position: absolute;
    top: 40px;
    right: 0;
    background-color: darkorchid;
  }
</style>

Comments

[JoyRax]

а когда я его вынес с элемента кнопки

Answer 1

[Юрий]

Скорее всего, у кого-то из родителей overflow: hidden

Comments

[JoyRax]

Спасбо, у меня в самом корневом элементе app.vue стоял overflow: hidden