如何将按钮放在图像的顶部？

Question

我正在尝试在图片上放置一个按钮。我试过做 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>

Answer 1

<a href="" class="btn btn-outline-primary" style="position: absolutee; left: 10px; bottom: 10px; z-index: 2;">Start Exploringg</a>

Answer 2

您需要指定绝对定位元素的位置，例如，您可以指定left: 0px。请注意，我已更改图像 url 以便制作功能演示，您应该在自己的代码中进行更改。

 <div class="landing-img" style="position:relative;">
      <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
      <a href="" class="btn btn-outline-primary" style="position: absolute; left: 0px;">Start Exploring</a>
  </div>

Answer 3

您可以很容易地做到这一点，方法是将图像设置为父项的背景 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;
    }

如何将按钮放在图像的顶部？

How to put the button on the top of the image?

html

css

z-index