html - 如何在不同的 z-index 图层中显示验证码图像而不影响底层？
问题描述
我有一个带有工具提示的 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>解决方案
对于您的第二个问题，需要修改验证码图像的位置。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>推荐阅读
- excel - VBA 从一个驱动器中删除文件
- bash - 在 macos 上找不到 Bash 命令
- flutter - 如何让 GestureDetector 在 Flutter Web 中检测两指拖动？
- python - 用于连接到 s3 客户端的 aws 配置文件
- php - 为什么我在教程代码中收到解析错误
- sql - 将 oracle sql 密集秩函数转换为 Bigquery
- python - 从数据框中自动制作多个条形图
- c++ - 为什么即使 std::getline 不返回布尔值，while(std::getline) 循环也能工作？
- pandas - 使用 GroupBy 后，列如何在 Pandas 数据框中工作
- blockchain - 如何在卡尔达诺中创建不可转让资产