How to display a captcha image in a different z-index layer without affecting the underlaying layer?

Question

I have a CSS layout, with a tooltip. I have links on the page, and when visitor hover over the links, images appear in tooltips. SOmetimes there is only one image in the tooltip, sometimes two images, and even three.

My code looks like:https://jsfiddle.net/vehpw5zn/ (I suggest viewing on jsfiddle, as the builtin code snippet dispays the tooltip only when scrolling with the mouse.)

body {
  margin: 64px 10px;
}

table.thumbnails {
  border-spacing: 0px;
  border-collapse: collapse;
}

table.thumbnails td {
  padding: 0px;
  margin: 0px;
  text-align: left;
}


.tooltiptext img {
  border: 1px solid black;
  display: inline-block;
  padding: 0px;
  margin: 0px;
  float: left;
}

.tooltip {

  position: relative;
  display: inline-block;
  text-decoration: none;
}




.tooltip .tooltiptext {
  display: none;
  background-color: rgba(76, 175, 80, 0.5);
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  font-family: 'Courier';
  font-size: 12px;
  position: absolute;
  z-index: 1;
  bottom: -300px;
  left: 100%;
  margin-left: 10px;

}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {

  display: table;

}


/**to display a small triangle*/
.tooltip .tooltiptext::before {
  
  content: "";
  position: absolute;
  top: 55px;
  left: -5px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}

<a href="#" class="tooltip">
  <div class=tooltiptext>
    <table class="thumbnails">
      <tr>
        <td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
        <td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
      </tr>
    </table>


  </div>

  Link text
</a>

It basically works, but I have a small gap between the two images.

My other problem, is that when I try to display a small captcha image in the tooltip on top of the content, in a different z-index layer, then the height of the small captcha image appears in the previous layer div, and the green part of the div becomes larger. I get a larger margin below the two brown images, which is transparent green. How can I avoid that? My code for this second phase: https://jsfiddle.net/vehpw5zn/1/

body {
  margin: 64px 10px;
}

table.thumbnails {
  border-spacing: 0px;
  border-collapse: collapse;
}

table.thumbnails td {
  padding: 0px;
  margin: 0px;
  text-align: left;
}


.tooltiptext img {
  border: 1px solid black;
  display: inline-block;
  padding: 0px;
  margin: 0px;
  float: left;
}

.tooltip {

  position: relative;
  display: inline-block;
  text-decoration: none;
}




.tooltip .tooltiptext {
  display: none;
  background-color: rgba(76, 175, 80, 0.5);
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  font-family: 'Courier';
  font-size: 12px;
  position: absolute;
  z-index: 1;
  bottom: -300px;
  left: 100%;
  margin-left: 10px;

}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {

  display: table;

}


/**to display a small triangle*/
.tooltip .tooltiptext::before {
  
  content: "";
  position: absolute;
  top: 55px;
  left: -5px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}

img.captcha {

display:none;
border:1px solid black;
position: relative;
top:-46px;
left:4px;
z-index:3;

}

.tooltip:hover img.captcha {

display: block;

}

<a href="#" class="tooltip">
  <div class=tooltiptext>
    <table class="thumbnails">
      <tr>
        <td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
        <td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
      </tr>
    </table>

  <img class="captcha" src="data:image/gif;base64,R0lGODlhlgAoAPABAAAAAP///yH5BAAAAAAAIf8LSW1hZ2VNYWdpY2sOZ2FtbWE9MC40NTQ1NDUALAAAAACWACgAAAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTCPAXefVDXy8DpT8OsMgDxe0ITlLXbGY9PWMzQA0imVOE9esd1c1dLXH8sO8QdfG4/RW3OaGMXFXe55W1JVvzZ51h5fR93dQGHHoFhfYJ5KYeCbo8TR3tABpAYnZsElxhWfJ1wiiKelp6qYHWobTKYQqN3rh+qoqa4VGG3nLCYvoOxuGCZxJDMd7iuzHqvarTCcMoctXMn1M0qVsfY1tzLBteynt/U3++mx4ab7biAoOXu6p3s38Z81MP1G1jgLff4jPi79/Ab84M2iLX5KBCI0YQtcwIpeHEivqC2Uxo8YJjRw7evwI0kIBADs=">
  </div>

  Link text
</a>

Answer 1

For your second issue, need to modify the position of the captcha image. The position property changed from relative to absolute, then align with bottom property instead of top property. left property changed from 4px to 15px. The value of bottom property and top property can be changed according to your need.

img.captcha {
  display: none;
  border: 1px solid black;
  position: absolute;  /* Change from relative to absolute */
  bottom: 15px;  /* Change from top:-46px; */
  left: 15px;  /* Change from 4px */
  z-index: 3;
}

body {
  margin: 64px 10px;
}

table.thumbnails {
  border-spacing: 0px;
  border-collapse: collapse;
}

table.thumbnails td {
  padding: 0px;
  margin: 0px;
  text-align: left;
}

.tooltiptext img {
  border: 1px solid black;
  display: inline-block;
  padding: 0px;
  margin: 0px;
  float: left;
}

.tooltip {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.tooltip .tooltiptext {
  display: none;
  background-color: rgba(76, 175, 80, 0.5);
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  font-family: 'Courier';
  font-size: 12px;
  position: absolute;
  z-index: 1;
  bottom: -300px;
  left: 100%;
  margin-left: 10px;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  display: table;
}


/**to display a small triangle*/

.tooltip .tooltiptext::before {
  content: "";
  position: absolute;
  top: 55px;
  left: -5px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}

img.captcha {
  display: none;
  border: 1px solid black;
  position: absolute;  /* Change from relative to absolute */
  bottom: 15px;  /* Change from top:-46px; */
  left: 15px;  /* Change from 4px */
  z-index: 3;
}

.tooltip:hover img.captcha {
  display: block;
}

<a href="#" class="tooltip">
  <div class=tooltiptext>
    <table class="thumbnails">
      <tr>
        <td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
        <td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
      </tr>
    </table>

    <img class="captcha" src="data:image/gif;base64,R0lGODlhlgAoAPABAAAAAP///yH5BAAAAAAAIf8LSW1hZ2VNYWdpY2sOZ2FtbWE9MC40NTQ1NDUALAAAAACWACgAAAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTCPAXefVDXy8DpT8OsMgDxe0ITlLXbGY9PWMzQA0imVOE9esd1c1dLXH8sO8QdfG4/RW3OaGMXFXe55W1JVvzZ51h5fR93dQGHHoFhfYJ5KYeCbo8TR3tABpAYnZsElxhWfJ1wiiKelp6qYHWobTKYQqN3rh+qoqa4VGG3nLCYvoOxuGCZxJDMd7iuzHqvarTCcMoctXMn1M0qVsfY1tzLBteynt/U3++mx4ab7biAoOXu6p3s38Z81MP1G1jgLff4jPi79/Ab84M2iLX5KBCI0YQtcwIpeHEivqC2Uxo8YJjRw7evwI0kIBADs=">
  </div>

  Link text
</a>