html - 无法将按钮放在图片下方或上方的图像上

Question

我正在尝试在我的图像上创建一个按钮。但是，我遇到了一个问题，我的按钮出现在它的下方或上方。我试图用 w3 示例之一解决这个问题，但仍然是同样的问题。另外，我还有其他问题如何降低这张图片的高度？因为如果我降低高度，它也不起作用。

<section>
        <button class="btn btn-danger">my_button</button>
        <img class="sectionImage" src="images/kendall-henderson-Pj6TgpS_Vt4-unsplash.jpg" alt="Logistics transport">
    </section>

.sectionImage {
    filter: grayscale(70%);
    max-width: 100%;
    height: auto;
}

Answer 1

试试这段代码

section{
  position: relative;
}
button{
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: 1;
}
.sectionImage {
    filter: grayscale(70%);
    max-width: 100%;
    height: auto;
}

<section>
        <button class="btn btn-danger">my_button</button>
        <img class="sectionImage" src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Logistics transport">
    </section>