在按钮后面画一个矩形会使按钮无法工作(CSS)

Question

我是CSS的新手，遇到了一些问题。现在我正试图在两个按钮后面绘制一个矩形，虽然我在绘制矩形方面取得了一些成功，但这会使按钮变得无用。以下是我为html中的导航(按钮所在的位置(编写的代码：

body {
background-color:mediumspringgreen;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 30% 6% 60% 4%;
grid-template-areas:    "header"
"nav"
"main"
"footer";
}

.rectangle{
width: 100%;
height: 4%;
background: gold;
position: absolute;
display: flex;
z-index: -1;
align-items: center;
justify-content: center;
}
.button1{
background-color: green;
color: gold;
border: 3px solid mediumspringgreen;
border-radius: 12px;
display: inline-block;
cursor: pointer;
}
nav{
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}

<nav>
<p class = "rectangle">
<button class = "button1" onclick="location.href= 'pàgina%20productes.html'">Productes</button>
<button class = "button1" onclick="location.href= 'pàgina%20contacte.html'">Contacte</button>
</p>
</nav>

有人知道让按钮可点击的解决方案吗？如果我删除了矩形，我可以转到按钮的链接，只有当矩形在它们后面时才会发生这种情况。

提前感谢！

编辑：似乎只有当体内的标签多于导航时，它才会失败。以下是JSFiddle：https://jsfiddle.net/h0uw36dk/

Answer 1

z索引有问题。您不需要在矩形中添加z-index属性。

.rectangle {
width: 100%;
height: 4%;
background: gold;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}