只有按钮的一部分可单击

Question

我做了两个按钮，但只有一部分按钮是可点击的，整个按钮部分应该是可点击的。我使用绝对位置来为按钮在我的页面中提供一个位置。

hml 代码：

<div class="knop">
<a href="https://mylink"><div class="sideLeft"><image 
src="images/knop.png"></div></a>
</div>
<div class="knop">
<a href="https://mylink"><div class="sideRight"><image 
src="images/knop1.png"></div></a>
</div>

使用此 css：

.sideLeft{
width: 150px;
height: 150px;
position: absolute;
Top: 41%;
display: block;
}
.sideRight{
width: 150px;
height: 150px;
position: absolute;
Top: 41%;
right: 0px; 
display: block
}
.knop img{
width: 150px;
height: 150px;
}

图片：图片

Answer 1

要确保您的按钮位于其他元素的顶部，请将以下内容添加到其类中：

z-index: 999;

z-index 属性指定元素的堆栈顺序。一 具有较大堆栈顺序的元素始终位于具有 较低的堆栈顺序。

在大多数浏览器中，这个(999)数字可以是0到2147483647之间的任何位置。

有关 z 索引的更多信息

您应该使用<img而不是<image。