Html 如何将透明导航条覆盖在英雄图像上，并在英雄图像上设置一个功能按钮？

我已经将我的导航栏设置为英雄形象顶部的透明，但是，英雄形象上的按钮不起作用

导航栏的z索引为1，“我的英雄”图像、文本和按钮的z索引为-1。这使得按钮不可点击，因为它被设置在导航栏后面

我尝试过的事情：

-我试着给我的按钮一个z索引为1，但它不起作用

-我尝试将我的按钮包装在一个div类中，并将其z索引设置为1，但它不起作用

-如果我反转导航栏和英雄图像的z索引，按钮会工作，但是导航栏设置在图像后面，无法看到

我如何实现将导航栏放在英雄图像的顶部并使我的按钮可点击

.top导航{
字体大小：20px；
页边顶部：0em；
边缘底部：0em；
字号：600；
填充：0px 32px；
颜色：白色！重要；
背景：透明；
}
.导航条覆盖{
位置：相对位置；
边缘底部：-104px；
z指数：1；
}
.第一节英雄{
位置：相对位置；
最小高度：自动；
高度：900px；
页边顶部：0em；
垫底：10em；
背景图像：url（“{%static”img/yellow_swoosh.svg%}”）；
背景位置：中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
背景尺寸：封面；
-o-背景尺寸：封面；
背景重复：无重复；
z指数：-1；
}

标题

您的Z索引应该大于与按钮重叠的导航条。

只需将Z索引设置为

.image {
  z-index : 1000;
}
.navbar {
  z-index : 1001;
}

.buttons {
  z-index : 1002;
}

---

您的问题将得到解决

使用正z索引代替导航栏高度？导航是如何与英雄按钮重叠的？你能添加一些成像仪参考，也许是整个部分的代码吗？我添加了更多的代码：）我看到了一堆相对

位置

s和无

绝对

。使英雄形象的父形象

相对
。将导航置于同一相对父对象中英雄图像的后面。使相对父级的所有子级
位置：绝对；排名：0；左：0。如果分层正确，您甚至不必使用z索引，使用这种技术。如果我将第一节英雄的z索引设置为2，并且导航栏设置为1，英雄图像将越过导航栏，因此我看不到导航栏。英雄图像上的按钮就可以工作了。如果你能准确地更新你系统中的代码片段，这将很有帮助。给定的代码片段不是很有用。或者显示您试图实现的目标的图形布局。