当您将鼠标悬停在一张照片上时，我试图将其放大。但是我很难让它扩展到已经存在的东西之上。目前它在其下扩展。
我的HTML和CSS是：
.userCard {width:360px;height:180px;border:1px solid black;float:left;margin:10px;position:relative;font-size:12px;background-image: url('paper.jpg')}
div:first-child {
opacity: .99;
}
.zoom:hover {
transform: scale(3); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
transform-origin: top left;
} <div class="userCard">
<table class="myTable" width="100%" cellspacing="0" height="100%">
<tr valign="top">
<td width="25%" style="padding:0px;" bgcolor="#E6E6E6">
<div class="zoom" style="background-color:white;"> <h1>
PHOTO
</h1>
</div>
</td>
<td width="75%">
<b>A N Employee
<div style="position:absolute;bottom:15;z-index:1000;right:15;font-family:arial;">
<table border="1" cellspacing="0" width="100%" style="font-size:14px;">
<tr>
<td style="padding:3px;line-height:10px">AM</td>
<td style="padding:3px;line-height:10px" bgcolor="" class="" >12/11</td>
<td style="padding:3px;line-height:10px" bgcolor="" class="" >13/11</td>
<td style="padding:3px;line-height:10px" bgcolor="" class="" >14/11</td>
<td style="padding:3px;line-height:10px" bgcolor="" class="" >15/11</td>
<td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray" class="" >16/11</td>
</tr>
<tr>
<td style="padding:3px;line-height:10px">PM</td>
<td style="padding:3px;line-height:10px" bgcolor=""> </td>
<td style="padding:3px;line-height:10px" bgcolor=""> </td>
<td style="padding:3px;line-height:10px" bgcolor=""> </td>
<td style="padding:3px;line-height:10px" bgcolor=""> </td>
<td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
我在这里找到了一篇文章，从中我获得了有关第一个孩子CSS的技巧，但是并没有达到目的。
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
如果有人可以帮忙，我已经在这里摆弄-谢谢！
https://jsfiddle.net/d76xkyou/1/
答案 0 :(得分：0)
您只需要在position上添加z-index和.zoom
见下文
.userCard {
width: 360px;
height: 180px;
border: 1px solid black;
float: left;
margin: 10px;
position: relative;
font-size: 12px;
background-image: url('paper.jpg')
}
div:first-child {
opacity: .99;
}
.zoom:hover {
transform: scale(3);
/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
transform-origin: top left;
z-index: 9999;
position: relative;
}<div class="userCard">
<table class="myTable" width="100%" cellspacing="0" height="100%">
<tr valign="top">
<td width="25%" style="padding:0px;" bgcolor="#E6E6E6">
<div class="zoom" style="background-color:white;">
<h1>
PHOTO
</h1>
</div>
</td>
<td width="75%">
<b>A N Employee
<div style="position:absolute;bottom:15;z-index:1000;right:15;font-family:arial;">
<table border="1" cellspacing="0" width="100%" style="font-size:14px;">
<tr>
<td style="padding:3px;line-height:10px">AM</td>
<td style="padding:3px;line-height:10px" bgcolor="" class="" >12/11</td>
<td style="padding:3px;line-height:10px" bgcolor="" class="" >13/11</td>
<td style="padding:3px;line-height:10px" bgcolor="" class="" >14/11</td>
<td style="padding:3px;line-height:10px" bgcolor="" class="" >15/11</td>
<td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray" class="" >16/11</td>
<tr>
<td style="padding:3px;line-height:10px">PM</td>
<td style="padding:3px;line-height:10px" bgcolor=""> </td>
<td style="padding:3px;line-height:10px" bgcolor=""> </td>
<td style="padding:3px;line-height:10px" bgcolor=""> </td>
<td style="padding:3px;line-height:10px" bgcolor=""> </td>
<td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
答案 1 :(得分：0)
我通过简单地添加足够高的z-index来进行管理。
.userCard {
width: 360px;
height: 180px;
border: 1px solid black;
float: left;
margin: 10px;
position: relative;
font-size: 12px;
background-image: url('paper.jpg')
}
div:first-child {
opacity: .99;
}
.zoom:hover {
transform: scale(3);
/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
transform-origin: top left;
z-index: 5000;
}<div class="userCard">
<table class="myTable" width="100%" cellspacing="0" height="100%">
<tr valign="top">
<td width="25%" style="padding:0px;" bgcolor="#E6E6E6">
<div class="zoom" style="background-color:white;">
<h1>
PHOTO
</h1>
</div>
</td>
<td width="75%">
<b>A N Employee
<div style="position:absolute;bottom:15;z-index:1000;right:15;font-family:arial;">
<table border="1" cellspacing="0" width="100%" style="font-size:14px;">
<tr>
<td style="padding:3px;line-height:10px">AM</td>
<td style="padding:3px;line-height:10px" bgcolor="" class="" >12/11</td>
<td style="padding:3px;line-height:10px" bgcolor="" class="" >13/11</td>
<td style="padding:3px;line-height:10px" bgcolor="" class="" >14/11</td>
<td style="padding:3px;line-height:10px" bgcolor="" class="" >15/11</td>
<td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray" class="" >16/11</td>
<tr>
<td style="padding:3px;line-height:10px">PM</td>
<td style="padding:3px;line-height:10px" bgcolor=""> </td>
<td style="padding:3px;line-height:10px" bgcolor=""> </td>
<td style="padding:3px;line-height:10px" bgcolor=""> </td>
<td style="padding:3px;line-height:10px" bgcolor=""> </td>
<td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>