Кнопки позицированы относительно не того блока которого нужно

Кнопки позицируются относительно body. Три нижние кнопки должны позицироваться относительно второго aside.

aside {}

aside button {
  height: 50px;
  width: 50px;
}

#all {
  align: left;
}

#installed {
  align: left;
}

#snap {}

#flatpack {
  align: left;
  vertical-align: middle;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
}

#appimage {
  align: left;
  vertical-align: bottom;
  top: 100%;
  position: absolute;
  transform: translateY(-100%);
  margin-bottom: 500px;
}

#software-sources {
  grvtermargin-top: 30%;
  min-height: 300px;
}
<aside>
  <div id="all"><button>All</button></div>
  <div id="installed"><button>Installed</button></div>
</aside>
<aside id="software-sources">
  <div id="snap"><button>Snap</button></div>
  <div id="flatpack"><button>Flatpack</button></div>
  <div id="appimage"><button>Appimage</button></div>
</aside>

при position: absolute; при position: relative;

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

Автор решения: Сергей Скворцов
#software-sources {
 grvtermargin-top: 30%;
 min-height: 300px;
 position: relative;
}
→ Ссылка