html - 绝对定位的元素不会被其容器剪裁

Question

我正在尝试使用最少的 javascript 在包含 div 的表中实现“粘性 header ”。我将包含的 div、表头和正文分开，并且表头绝对定位。这几乎有效。我唯一的问题是标题出现在包含的 div 上方。有没有办法让我的表头出现在包含 div 的下面(没有 javascript)？我需要标题绝对定位在该 div 的顶部。我已经在容器上尝试了 z-indexes 和相对定位。有什么我想念的吗？

在下面的代码片段中，白色标题应该被滚动条和绿色 div 隐藏。

需要注意的一件事 - 我确实意识到我将不得不使用 javascript 来实现页眉的水平滚动。但这个问题纯粹是关于在没有 javascript 的情况下保持垂直滚动的标题的剪辑。

这是我想要达到的结果:

滚动到顶部时:

滚动到底部时:

.container-container {
  background-color:#ccffcc;
  z-index:3;
}
.container {
  background-color:#ffcccc;
  height: 150px;
  width: 200px;
  overflow: auto;
  z-index:1;
}
table {
  border-collapse: collapse;
}
th {
  width: 100px;
  min-width: 100px;
}
td {
  width: 100px;
  min-width: 100px;
  background-color: #e0e0e0;
}
thead {
  position: absolute;
  background-color: #fff;
  border: solid 1px #e0e0e0;
  z-index:2;
}
tbody {
  display: block;
  margin-top: 29px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-container">
  <div class="container">
    <table id="callLogExplorer">
      <thead>
        <tr>
          <th>head1</th>
          <th>head2</th>
          <th>head3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
      </tbody>
    </table>

  </div>

</div>

Answer 1

丢失<thead>和 <tbody>然后放<th>在第一行。然后相应地设置样式。您可以定位 tr:first-of-type 而不是在 css 中定位 thead , 并且也失去绝对位置。

.container-container {
  background-color:#ccffcc;
  z-index:3; position:relative;
}
.container {
  background-color:#ffcccc;
  height: 150px;
  width: 200px;
  overflow: auto;
  z-index:1;
}
table {
  border-collapse: collapse;
}
th {
  width: 100px;
  min-width: 100px;
}
td {
  width: 100px;
  min-width: 100px;
  background-color: #e0e0e0;
}
tr:first-of-type {
  background-color: #fff;
  border: solid 1px #e0e0e0;
  z-index:2;
  position:absolute; top:0;
  width: 180px; overflow-x: auto;
}
table {
  display: block;
  margin-top: 29px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-container">
  <div class="container">
    <table id="callLogExplorer">
        <tr>
          <th>head1</th>
          <th>head2</th>
          <th>head3</th>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
    </table>

  </div>

</div>