Html 如何将按钮置于图像顶部？

我想在图片上加个按钮。我试过做z-index，但它似乎不起作用

 <div class="landing-img">
      <img src="CartoonPalace.png" class="img-fluid" style="position:relative; z-index: -1;"  alt="">
      <a href="" class="btn btn-outline-primary" style="position: absolute; z-index: 1000;">Start Exploring</a>
  </div>

---

您需要指定绝对定位元素的位置，例如，您可以指定

左：0px

。请注意，为了制作一个功能演示，我已经更改了图像url，您应该在自己的代码中更改它

---

通过将图像设置为父div的背景，然后将按钮居中，可以非常轻松地完成此操作

  <div class="landing-img">
      <a href="" class="btn btn-outline-primary">Start Exploring</a>
  </div>

    // css
    .landing-img{
        background-image: url(CartoonPalace.png)
        display:flex;
        justify-content: center;
        align-items: center;
    }

//css
.着陆img{
背景图片：url（cartonPalace.png）
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

代码转储不能获得好的答案。您应该解释这是如何以及为什么解决他们的问题的。我推荐阅读，“。这可以帮助未来的用户学习并最终将这些知识应用到他们自己的代码中。当代码被解释时，你也可能得到用户的积极反馈/支持票。这对兄弟没有帮助，我仍然没有看到按钮。为了运行演示，我已经更新了我的答案。我看到了按钮，你能告诉我如何将按钮放置在某个位置吗？我尝试通过指定左值和顶值来使用定位，但当页面调整大小时，它会在图像下方按下按钮。@flamioo按钮的父项（包装它的元素）应定义

位置：相对
。我已经更新了我的答案。如果这仍然不能使它工作，你应该创建一个新的演示给我看，否则我无法调试它工作的人，非常感谢你，但问题是我将使用django呈现这些模板，它需要静态文件的规范。
  <div class="landing-img">
      <a href="" class="btn btn-outline-primary">Start Exploring</a>
  </div>

    // css
    .landing-img{
        background-image: url(CartoonPalace.png)
        display:flex;
        justify-content: center;
        align-items: center;
    }