Html 点击 A href 位置上方的另一个元素时，不会转到该位置

Question

我想知道是否可以阻止我的 div 在按下时转到我的 A 标签中的 href。我的 div 当前漂浮在带有 position: absolute.

的 A 标签上

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

我相信这就是你想要的。

.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>

Answer 2

删除 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>

Html 点击 A href 位置上方的另一个元素时，不会转到该位置

Html don't go to A href location when clicked on another element above it

html

css

href