html - 当元素嵌套在设置为显示 : block? 的元素中时，如何允许元素溢出

Question

我有一个引导表，我需要表体进行垂直滚动。

我在表格中还有一些 td 元素，我想在悬停时扩展它们并溢出整个表格。

.element:hover {
  background-size: 100% 100%;
  transform: scale(6, 6);
  transform-origin: center;
  transition: all 0.5s ease-in-out;
  z-index: 999;
}

一切都按预期运行，直到我设置

tbody { display: block }

据我所知，这是让 tbody 滚动的唯一方法。但是当添加这个时，td 元素不再在悬停时溢出表格，而是隐藏在 thead 后面。

我试图通过添加相对和绝对位置来解决它，但它似乎没有任何区别......我还尝试将 thead 上的 z-index 更改为 -1这也没有解决问题。

如果您运行下面的代码片段，并且将鼠标悬停在具有绿色背景的 td 元素上，这就是我正在寻找的行为。您可以看到它在悬停时溢出了整个表格。但是这个版本在 tbody 中没有滚动。

tbody {
  height: 200px;
  /*   display: block; */
  overflow-y: scroll;
  overflow-x: hidden;
}

.element {
  background-color: green;
}

.element:hover {
  background-size: 100% 100%;
  transform: scale(6, 6);
  transform-origin: center;
  transition: all 0.5s ease-in-out;
  z-index: 999;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card col-8 offset-2 p-0 mt-5">
  <div class="card-body p-0">
    <table class="table table-striped">
      <thead class="thead-dark">
        <tr class="row m-0">
          <th class="col-3" scope="col">#</th>
          <th class="col-3" scope="col">First</th>
          <th class="col-3" scope="col">Second</th>
          <th class="col-3" scope="col">Third</th>
        </tr>
      </thead>
      <tbody>
        <tr class="row m-0">
          <th class="col-3" scope="row">1</th>
          <td class="col-3">Blah</td>
          <td class="col-3 element">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">2</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">3</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">4</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">5</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">6</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

但是现在，如果您在启用 tbody 滚动的情况下运行下一个代码片段，您可以看到当鼠标悬停在绿色 td 元素上时，它现在隐藏在 thead.

tbody {
  height: 200px;
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;
}

.element {
  background-color: green;
}

.element:hover {
  background-size: 100% 100%;
  transform: scale(6, 6);
  transform-origin: center;
  transition: all 0.5s ease-in-out;
  z-index: 999;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card col-8 offset-2 p-0 mt-5">
  <div class="card-body p-0">
    <table class="table table-striped">
      <thead class="thead-dark">
        <tr class="row m-0">
          <th class="col-3" scope="col">#</th>
          <th class="col-3" scope="col">First</th>
          <th class="col-3" scope="col">Second</th>
          <th class="col-3" scope="col">Third</th>
        </tr>
      </thead>
      <tbody>
        <tr class="row m-0">
          <th class="col-3" scope="row">1</th>
          <td class="col-3">Blah</td>
          <td class="col-3 element">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">2</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">3</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">4</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">5</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
        <tr class="row m-0">
          <th class="col-3" scope="row">6</th>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
          <td class="col-3">Blah</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

td 元素最终将成为图像，这就是为什么我不希望它在 thead 后面被截断。

如何获得我想要的行为并允许元素溢出整个表格，同时在 tbody 上进行垂直滚动？

Answer 1

您可以使用 css transform-origin 属性来实现该特定要求。

.element:hover {
    background-size: 100% 100%;
    transform: scale(6, 6);
    transform-origin: center;
    transition: all 0.5s ease-in-out;
    z-index: 999;

    transform-origin: 54% 14%;
}