当一个元素嵌套在一个被设置为display: block的元素中时，我怎么允许它溢出呢？

Question

我有一个bootstrap表，我需要表体有垂直滚动。

我在表中还有一些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%;
}

Answer 2

您的td隐藏在您的thead 后面，因为在tbody上溢出。在表的容器上设置溢出，而不是在tbody上设置，看看这是否适用于您。

​

.card-body {
    /* Instead of tbody */
    height: 200px;
    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>

​