绝对位置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>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="">&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

您只需要在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="">&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>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="">&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>