当位置为绝对时，相对于 table 单元格定位元素顶部

Question

请到我的网站：

http://35.232.230.0:81/

您将看到 table 目录项。将鼠标悬停在其中一张图片上。您应该会看到放大的图像。

您可能还会注意到图像有点闪烁。当您将鼠标悬停在缩略图的上部时会发生这种情况。

发生这种情况的原因是，如您所见，放大图像的上边缘位于缩略图图像的中间位置。这意味着当图像放大时，鼠标位于放大图像的正上方。这意味着只要您移动鼠标，它就会将其检测为 mouseout 事件，这会导致图像再次缩小。但这又会触发放大，因为鼠标仍悬停在缩略图上。这个结果是一个放大和缩小的循环，当看得非常快时，会给你带来闪烁。

所以我想知道是否有办法强制放大图像的顶部与缩略图相同。

悬停事件导致 css 转换，其中 class 被转换为将图像的位置设置为绝对位置：

img {
    transition: width 0;

    &:hover {
        position: absolute;
        z-index: 100;
        width: 300px;
        border: 1px solid black;
        box-shadow: 5px 5px 10px grey;

        transition: width .2s linear;
    }
}

我会尝试通过将放大图像的顶部设置为 0 来调整放大图像的顶部属性，但是使用 position: absolute，这只会导致图像位于屏幕的左上角。我不确定如何计算 CSS 中相对于其包含元素的位置（angular mat-table 中的 td），所以我有点不知所措如何做到这一点。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

首先，为了 position: absolute 达到您想要的效果，您需要定位它可以关联的父级（任何不是 position: static 的东西）。

这意味着在包含 <td> 上设置 position: relative 应该 有效。但遗憾的是，事实并非如此。 :( That is because relative position on table cells is undefined 并且大多数浏览器都不能很好地处理它。真可惜。

因此，您最好的选择是用 <div>（或类似的东西）包裹您的图像，并设置 position: relative，如下例所示。

table {
  border-collapse: collapse;
}

table th,
table td {
  padding: 5px;
}

table td {
  border-top: 1px solid;
}

div {
  height: 100px;
  position: relative;
  width: 100px;
}

img {
  border: 1px solid transparent;
  height: auto;
  position: absolute;
  transition: width .2s linear;
  width: 100px;
  z-index: 100;
}

img:hover {
  border-color: #000;
  box-shadow: 5px 5px 10px grey;
  width: 400px;
  z-index: 110;
}

<table>
  <tr>
    <th>Name</th>
    <th>Image</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>
      <div>
        <img src="https://dummyimage.com/400x400/f48224/fff" alt>
      </div>
    </td>
    <td>Description</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>
      <div>
        <img src="https://dummyimage.com/400x400/f48224/fff" alt>
      </div>
    </td>
    <td>Description</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>
      <div>
        <img src="https://dummyimage.com/400x400/f48224/fff" alt>
      </div>
    </td>
    <td>Description</td>
  </tr>
</table>

另一种解决方案可能是使用 CSS 转换 (scale)，因为这些不会改变元素的文档流。

当位置为绝对时，相对于 table 单元格定位元素顶部

Positioning top of element relative to table cell when position is absolute

css

transition

position

absolute

mat-table