绝对位置div的z索引

Question

当您将鼠标悬停在一张照片上时，我试图将其放大。 但是我很难让它扩展到已经存在的东西之上。 目前它正在其下扩展。

我的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>AN 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="">&nbsp;</td> <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td> <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td> <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td> <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray">&nbsp;</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/

Answer 1

您只需.zoom添加position和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: 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>AN 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="">&nbsp;</td> <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td> <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td> <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td> <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray">&nbsp;</td> </tr> </table> </div> </td> </tr> </table> </div> 

Answer 2

我通过简单地添加足够高的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>AN 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="">&nbsp;</td> <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td> <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td> <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td> <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray">&nbsp;</td> </tr> </table> </div> </td> </tr> </table> </div>