如何让一个按钮组出现在另一个<div>之上？

<div class="container">
  <div class="overlay"></div>
  <div class="button-group">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
  </div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.overlay {
  position: relative;
  background-color: #ccc;
  width: 100%;
  height: 100%;
}

.button-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.button-group button {
  margin: 5px;
}