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

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上的inspect元素完成了这个。 和链接工作...

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

Answer 4

我不认为这是一个z索引问题，因为.block的位置是相对的。但是很难指出这个问题只有很少的信息..提供一些deatils或jsfiddle链接

Answer 5

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

z-index解决方案是正确的，但是要使z-index工作，你必须添加位置：相对于元素，所以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 */
}