html - 图片链接在块内时不起作用

Question

你知道为什么我的图片链接在容器内不起作用（图片是右侧的白色三角形）吗？请注意，在此块之外它可以正常工作。谢谢

CSS：

.block {
    position: relative;
    display: block;
    clear: both;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
    width: 100%;
}

.block img {
    float: right;
    margin-left: 40px;
}

Answer 1

添加此 CSS 应该可以解决您的问题：

.arrow-circle{
   position:relative;
   z-index: 9999;
}

Answer 2

我认为 .block 即将出现在图像上.. 将图像的 z-index 设置得非常高。或者做这个。

.block {
    position: relative;
    display: block;
    clear: both;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
    width: 100%;
pointer-events:none;
}

Answer 3

我已经在 chrome 上使用了 inpect 元素来做到这一点......并且链接工作......

#touchPointContainer {
position: relative;
height: 600px;
pointer-events: none;
}

Answer 4

我认为这不是 z-index 问题，因为 .block 的位置是相对的。然而，很难指出给出的信息很少的问题..提供一些细节或jsfiddle链接

Answer 5

您的问题是 #touchPointContainer 位于按钮上方。建议的“指针事件：无；” 解决方案是一个没有得到广泛支持的 Firefox hack。

z-index 解决方案是正确的解决方案，但是要使 z-index 起作用，您必须添加 position:relative 到元素，因此 Gurpreet Singh 确定了它。

Answer 6

需要为图像提供定位上下文，以便应用 Z-index

.block img {
float: right;
margin-left: 40px;
    position:relative;
    z-index: 100; /* probably any number more than 1 will do */
}