title: Unclickable layered element, Z-Index not working
body: <p>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.</p>
  
  <p>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?</p>
  
  <p><a href="https://codepen.io/JFarenci/pen/bLjOZZ" rel="nofollow noreferrer">Here's the pen as well.</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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("&lt;div class='tagger'&gt;&lt;div class='xBox hidden'&gt;x&lt;/div&gt;&lt;div class='frame'&gt;&lt;/div&gt;&lt;div class='name'&gt;&lt;ul&gt;&lt;li&gt;One&lt;/li&gt;&lt;li&gt;Two&lt;/li&gt;&lt;li&gt;Three&lt;/li&gt;&lt;li&gt;Fork&lt;/li&gt;&lt;li&gt;Fyve&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;");
  });
  
  
  $(document).on('click', '.xBox', function(e){
    $(e.target).parent().remove();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script
    src="http://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"&gt;
  &lt;/script&gt;
  
  &lt;div class="container"&gt;
    &lt;img id="crowd" src="https://s3.amazonaws.com/viking_education/web_development/web_app_eng/photo_tagging_small.png"&gt;
  
    
    &lt;div class="tagger"&gt;
      &lt;div class="xBox hidden"&gt;x&lt;/div&gt;
      &lt;div class="frame"&gt;&lt;/div&gt;
  
      &lt;div class="name"&gt;
        &lt;ul&gt;
          &lt;li&gt;One&lt;/li&gt;
          &lt;li&gt;Two&lt;/li&gt;
          &lt;li&gt;Three&lt;/li&gt;
          &lt;li&gt;Fork&lt;/li&gt;
          &lt;li&gt;Fyve&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>