单击上面的另一个元素时,Html不会转到A href位置

Question

我想知道是否有可能阻止我按下div我的A标签中的href .我的div当前漂浮在我的A标签上position: absolute.

Jsfiddle我的问题:https://jsfiddle.net/ac80u7bd/

我需要css样式:position: relative在我的div方面阻止我的按钮粘在页面的左上角.我不确定这是否是导致问题的原因.

我的HTML看起来像这样:

<div class="image col-md-6">
  <a href="https://google.com">
    <img width="500" height="300" src="http://i.imgur.com/uR2o8pb.jpg">
  </a>
  <div class="edit-image">&middot;&middot;&middot;</div>
</div>

CSS:

.image {
    padding: 8px;
    position: relative;
}

.image .edit-image{
    background-color: red;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 15px;
    left: 15px;
    pointer-events: none;
    z-index: 100;
}

单击<div class="edit-image">元素时是否可以不跟随href ？

Answer 1

删除pointer-events:none;和瞧!

.image {
  padding: 8px;
  position: relative;
}

.image .edit-image {
  background-color: red;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 15px;
  left: 15px;
  z-index: 100;
}

<div class="image col-md-6">
  <a href="https://google.com">
    <img width="500" height="300" src="http://i.imgur.com/uR2o8pb.jpg">
  </a>
  <div class="edit-image">&middot;&middot;&middot;</div>
</div>