如何在不同的z-index图层中显示验证码图像，而又不影响底层图层？

Question

我有一个CSS布局，带有工具提示。我在页面上有链接，当访客将鼠标悬停在链接上时，图像会显示在工具提示中。有时工具提示中只有一幅图像，有时是两幅图像，甚至三幅。

我的代码看起来像：https://jsfiddle.net/vehpw5zn/（我建议在jsfiddle上查看，因为内置代码段仅在使用鼠标滚动时才显示工具提示。）

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>

基本上可以用，但是两个图像之间的距离很小。

[我的另一个问题是，当我尝试在内容顶部的工具提示中的另一个z-index层中显示小验证码图像时，小验证码图像的高度会显示在上一层div中， div的绿色部分变大。在两个棕色图像（透明的绿色）下方，我得到了较大的边距。我该如何避免呢？我在第二阶段的代码：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

对于第二个问题，需要修改验证码图像的位置。 position属性从relative更改为absolute，然后与bottom属性而不是top属性对齐。 left属性从4px更改为15px。 bottom属性和top属性的值可以根据需要进行更改。

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>