z-index 个绝对定位的 div

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>

我在这里找到了一篇文章，其中我获得了有关 first-child CSS 的提示，但没有成功。

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

如果有人可以提供帮助，我在这里做了一个 fiddle - 谢谢！

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>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>

z-index 个绝对定位的 div

z-index of absolute positioned divs

html

css

z-index