如何将按钮放在图像上方（HTML/CSS）

Question

我想通过 html/css 代码在图像轮播中的图像上方放置一些具有特定位置的按钮。我查看了不同的帖子，但无法解决我的问题。 这是我的 HTML 代码:

<!-- This is the image on which I want to put the buttons -->
      <div class="carousel-item">
       <img src="<?= Vector_url[7][1] ?>" class="d-block w-100" alt="Nope">

      <!-- Buttons container to download PDFs -->
       <div class="container" id="fila1">
        <div class="row" id="cajas1">
          <a class="btn btn-primary col" href="<?= Vector_Survey[25][1] ?>" role="button" target="_blank" >MSN087</a>
          <a class="btn btn-primary col" href="<?= Vector_Survey[26][1] ?>" role="button" target="_blank" >MSN089</a>
        </div>
       </div>
      </div>

这是我的 CSS 代码：

img {
        padding: 0;
        display: block;
        margin: 0 auto;
        max-height: 90%;
        max-width: 90%;
        z-index:-1;
    }
div {
        padding: 0;
        display: block;
        margin: 10px auto 10px auto;
        max-height: 100%;
        max-width: 100%;
    }
.container{
  z-index:100;      
          }
.carousel-item{
  z-index:-1;
  background-size: cover;
              }
/* Buttons Style */
.btn {
  color:black;
  background-color:white;
  border:white;
  margin:10px;
  padding:-10px;
  text-decoration:underline;
  font-weight:bold;
  max-width:90px;
  height:30px;
  margin-right:22px;
  z-index:1;
}

我不知道我的代码是否有问题，或者也许我遗漏了一些东西，但按钮出现在图像后面，而我想要相反的东西。

提前非常感谢您！

Answer 1

您将需要

position: absolute

或

position: fixed

或

position: relative

。 您可以将

position: relative

添加到按钮的 CSS 属性中，使其按照您想要的方式工作。
默认情况下，所有元素的位置都是

static

。位置为

static

的元素不尊重

z-index

并且

z-index

会被忽略。这就是您的

z-index

不起作用的原因。

编辑： 找到你的问题所在了。为您的图像赋予属性

position: absolute

。这应该会搞乱它的定位，但是，你的问题将会得到解决，你可以使用 flexbox 再次正确对齐它们。现在您的按钮位于图像上方（如果我们从三维角度看）。查看我为解决这个问题而创建的这个CodePen。

Answer 2

为了在您的情况下将按钮放在另一个元素（图像/轮播）顶部，您应该将

position:relative; z-index:1;

放入 .container 类，将

position:absolute;z-index:999;

放入 .btn 类。 之后，您必须通过使用左/右/上/下属性移动按钮来更精确地定位按钮。 Z-index - 索引越高，它在其他元素中拥有的特权就越大。因此，如果你想将按钮放在图像之上，你应该像我一样，索引较高的按钮，索引较低的图像。

Answer 3

也许不是通过更改边距和填充来调整按钮位置

尝试使用

position: absolute;

和

top: ;

以及

left: ;

命令来调整位置。

如果您想知道为什么您的

z-index

不起作用，那是因为默认情况下所有对象都分配了

static

位置，而位置

static

忽略了

z-index

Answer 4

看看你的例子。其中一种方法是给予您的

button

元素

position: absolute

并将

position: relative

给予他最亲近的父母。之后，您将能够为您的按钮提供更具体的定位。

查看下面的链接和示例。

https://www.w3schools.com/howto/howto_css_button_on_image.asp

注意：请注意，该网站（据我所知）不是最好的知识来源，但其中显示的示例与您的问题相关。