将div覆盖另一个

Question

我想将“顶部容器” div覆盖在“图像” div上，即使我使用Z-index也不起作用。

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.image {
  background-image: url("pic/back.jpg");
  z-index: -1;
  height: 30rem;
  background-size: 100%;
  position: relative;
  margin: 0;
}

.top-container {
  font-family: "Dancing Script", cursive;
  z-index: 2;
  position: absolute;
  margin: 0;
}

.top-container h1 {
  margin: 0;
  font-size: 3rem;
  color: #00b894;
}

.top-container h2 {
  font-size: 2rem;
  color: #0984e3;
}

<!--Google-fonts-->
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap" rel="stylesheet" />

<!--Image-container-->
<div class="image"></div>

<!--Top-container-->
<div class="top-container">
  <h1>Hi<br />There</h1>
  <h2>I'am</h2>
  <h1>Thiru</h1>
</div>

我只是一个初学者，所以我需要一些解决方案的解释。请为我提供解决上述问题的概念。