title: jQuery CSS put image over image with javascript event handlers
body: <p>I am trying to make an image gallery where you have a thumb of the image, then when you hover over it a red X appears at the bottom right of the thumb. </p>
  
  <p>If you click the thumb itself it will open a lightbox gallery.  If you click the red X image, it will delete the image.</p>
  
  <p>I have that CSS setup fairly well, for now anyway.  It places the red X in the correct place over the image, and I have it's z set to like 20000.</p>
  
  <p>The problem is no matter if I click the thumb or the x the lightbox fires.</p>
  
  <p>Here is what we are looking at:</p>
  
  <p>Some JS:</p>
  
  <pre><code>$('#PicturePreview a').lightBox();
  $(document).delegate('.delete_img', 'click', function() {
      alert("You dirty rat");
              // I can't get it to get in here....
  });
  </code></pre>
  
  <p>Some CSS:</p>
  
  <pre><code>.delete_img {
  left: 0;
  position: absolute;
  top: 80px;
  text-align: right;
  width: 150px;
  z-index: 2000000;
  }
  #PicturePreview img {
  max-height: 120px;
  max-width: 153px;
  }
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;div id="PicturePreview"&gt;
  &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;
          &lt;div class='preview_image'&gt;
          &lt;a href='../../pic.jpg' alt='' /&gt;
                          &lt;img src='../../pic.jpg' alt='' /&gt;
              &lt;div class='delete_img'&gt;
                              &lt;img src='assets/common/red_x.png' alt='' /&gt;
                          &lt;/div&gt;
          &lt;/a&gt;
                  &lt;/div&gt;
      &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>