onclick和<a> not working properly

Question

Here is my code:

<div style="position:absolute;z-index: -1; right: 0; top: 0; width: 30%; height: 100%;">
    <a href="&next"><img id="next" src="img/next.png" style="height:100%;width:100%"></a>
</div>

The a doesn't work well, it just works on the top left of the image. this is quite a big problem for me as this is part of a faq page where you can scroll trough questions with < and > at the sides on the page.

I'm having the same problem with the previous one (at the left). I tried doing position:relative and float:right and it only worked on the bottom half of the image.

Can anyone help?

Answer 1

默认情况下，<a routerLink="../Graded/add_grade"> 具有内联样式，请尝试：

<a>

Answer 2

通常，当您想要在HTML上开发一些下一个/上一个类型的布局时，它应该是这样的：

<强>集装箱：

对于容器，您应该使其绝对并覆盖文档的整个区域。为实现同样的目的，创建一个html结构并使用css类。

下一步/上一个：

对于导航按钮，您只需要定义相同的宽度和不透明度。确保箭头图像垂直居中后，您需要将其写入容器范围。

以下是这两个组件的代码示例：

HTML：

<div class="container">
    <a href="&next" class="next">
      <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25 />
    </a>
    <a href="&prev" class="prev">
       <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25 />
    </a>
</div>

CSS：

.container{
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: grey;
 }

.next{
    position:absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background: lightblue;
 }
.prev{
    position:absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background: lightgreen;
 }
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.next img, .prev img{
    background: #3A6F9A;
    vertical-align: middle;
    height: auto;
    width: 100%;
}

可在此处找到完整示例：DEMO

Answer 3

简单地把z-index：1像这样

<div style="position:absolute;z-index: 1; right: 0; top: 0; width: 30%; height: 100%;">
    <a href="&next"><img id="next" src="next.png" style="height:100%;width:100%"></a>
</div>

我认为它可能有效