仅按钮的一部分可点击

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;
}

图片： Image

Answer 1

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

z-index: 999;

  

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

在大多数浏览器中，此(999)号可以从0到2147483647之间的任意位置。

More about z-index

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