Unclickable layered element, Z-Index not working

Question

Finishing up a Photo Tagging practice widget and all I have left is a bit of a problem where the "x" boxes to close previously made tags can't be selected. I made sure that the code to close them works already, but due to how I'm using a layered div that follows the cursor I'm probably never actually clicking it. I've made sure it also has a higher z-index value but that still does not appear to affect this issue.

Edit: Just found another minor issue as well, whenever the tagging box turns into the green tagged box it drops by about 5 pixels. Is it possible to simply offset the CSS height or would you have to give it all new parameters?

Here's the pen as well.

$(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

You don't need to modify the z-index (and probably shouldn't, as it would look strange when the elements overlap). Instead, simply apply pointer-events:none to the element that follows the mouse; this will allow clicks to pass through it to the elements below.

Answer 2

Your .tagger z-index is lower then your .tagging z-index. So your tagging overlap it.

Answer 3

Actually z-index is working. And it is working withing its parent. You cannot expect xBox elem to appear in front tagger elem by applying z-index because it works withing its parent.

In the following code, i did some changes to the tagged class. I changed its z-index to a greater value so that it appear in front of tagger elem.

$(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: 5;
  cursor: pointer;
}

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