时间戳

首页 > 解决方案 > 绝对定位 div 的 z-index

html - 绝对定位 div 的 z-index

问题描述

当您将鼠标悬停在照片上时，我正在尝试放大照片。但是，我很难让它在已经存在的基础上扩展。目前它在它下面扩展。

我的 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/

标签： htmlcssz-index

解决方案

您只需要添加 aposition和 az-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>

推荐阅读