Правильное наслоение в HTML

Question

img

На изображении выше я хочу, чтобы темно-синий div отображался над кнопкой «Купить сейчас», как и для изображений, я попытался настроить индекс z для обоих из их, но, похоже, это работает, если я введу z index -1 для кнопки «Купить сейчас», он просто полностью удалит его с дисплея. Вместо этого я ввел z index:9967 для темно-синего div, но это тоже не работает.

вот css для темно-синего div

.view-side{
z-index: 9967;}

Html для кнопка

<div className="action" >
 <button className="action-buy">Buy Now</button>
 <button className="action-add">Add to Cart</button>
 </div> 

Html для div

<aside className="view-side">
  <h3>Category</h3>
  <button onClick={closeMenu} className="close">x</button>
  <ul>
   <li>Pants</li>
   <li>Shirts</li>
   </ul>
  </aside>

Как решить эту проблему