不可点击的分层元素，Z-Index 不起作用

Question

完成一个照片标记练习小部件，我剩下的只是一个问题，即无法选择关闭以前制作的标签的“x”框。我确保关闭它们的代码已经工作，但由于我如何使用跟随光标的分层 div，我可能从未真正点击过它。我已经确定它也有更高的 z-index 值，但这似乎仍然不会影响这个问题。

编辑：刚刚发现另一个小问题，每当标记框变成绿色标记框时，它就会下降大约 5 个像素。是否可以简单地偏移 CSS 高度，或者您是否必须为其提供所有新参数？

笔也在这里。

$(document).bind('mousemove', function(e){
    $('.tagger').css({
       left:  e.pageX - 55,
       top:   e.pageY - 55
    });
});

$('#crowd').click(function(){
  $('.tagging').attr('class', 'tagger');
});

$('#crowd').mouseleave(function(){
  $('.tagging').attr('class', 'tagger');
});

$(document).on('click', '.tagger', function(e){
  $('.tagger').attr('class', 'tagging');
});

$(document).on('click', '.tagging li', function(e){
  $('.tagging .name').text($(event.target).text());
  $('.tagging .xBox').removeClass('hidden');
  $('.tagging').attr('class', 'tagged');
  $( ".container" ).append("<div class='tagger'><div class='xBox hidden'>x</div><div class='frame'></div><div class='name'><ul><li>One</li><li>Two</li><li>Three</li><li>Fork</li><li>Fyve</li></ul></div></div>");
});


$(document).on('click', '.xBox', function(e){
  $(e.target).parent().remove();
});

.tagger {
  top: 0px;
  left: 0px;
  position: absolute;
  z-index: 3;
}

.tagger .frame {
  position: relative;
  height: 100px;
  width: 100px;
  padding: 0px;
  border: 5px;
  border-style: solid;
  border-color: red;
}

.tagger .name {
  display: none;
  position: relative;
  top: -5px;
  height: 90px;
  width: 90px;
  padding: 5px;
  border: 5px;
  border-style: solid;
  border-color: red;
  background-color: white;
}

.tagger .name ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  display: inline-block;
}



.tagging {
  position: absolute;
  z-index: 3;
}

.tagging .frame {
  position: relative;
  height: 100px;
  width: 100px;
  padding: 0px;
  border: 5px;
  border-style: solid;
  border-color: red;
}

.tagging .name {
  position: relative;
  top: -5px;
  height: 90px;
  width: 90px;
  padding: 5px;
  border: 5px;
  border-style: solid;
  border-color: red;
  background-color: white;
}

.tagging .name ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  display: inline-block;
}



.tagged {
  position: absolute;
  z-index: 2;
}

.xBox {
  z-index: 5;
  position: relative;
  top: 15px;
  left: calc(100% - 15px);
  border-radius: 50%;
  position: relative;
  height: 20px;
  width: 20px;
  padding: 0px;
  background-color: green;
  text-align: center;
}

.xBox span {
  display: inline-block;
}

.tagged .frame {
  position: relative;
  height: 100px;
  width: 100px;
  padding: 0px;
  border: 5px;
  border-style: solid;
  border-color: green;
}

.tagged .name {
  position: relative;
  top: -5px;
  height: 15px;
  width: 100px;
  padding: 0px;
  border: 5px;
  border-style: solid;
  border-color: green;
  background-color: green;
  display: inline-block;
}

.hidden {
  display: none;
}



.container {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
</script>

<div class="container">
  <img id="crowd" src="https://s3.amazonaws.com/viking_education/web_development/web_app_eng/photo_tagging_small.png">

  
  <div class="tagger">
    <div class="xBox hidden">x</div>
    <div class="frame"></div>

    <div class="name">
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Fork</li>
        <li>Fyve</li>
      </ul>
    </div>

  </div>
</div>

Answer 1

您不需要修改z-index（并且可能不应该修改，因为当元素重叠时它看起来很奇怪）。相反，只需应用于pointer-events:none跟随鼠标的元素；这将允许点击通过它传递到下面的元素。