溢出滚动让我看不见下面的物体

Question

在我的应用程序中，我添加了一个带有固定标题的表：

<section class="">
  <div class="tableRowArea">
    <table class="table tableRow">
      <thead>
        <tr>
          <th>
            Autista
            <div>Autista</div>
          </th>
          <th>
            Data
            <div>Data</div>
          </th>
          .....
      </thead>
      <tbody></tbody>
    </table>
  </div>
</section>

和css：

section {
  position: relative;
  padding-top: 27px;
  background: #004f4f;
  height: 100%;
}
section.positioned {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 800px;
  box-shadow: 0 0 15px #333;
}
.tableRowArea {
  height: 100%;
  overflow: auto;
}
table {
  border-spacing: 0;
  width: 100%;
}
.tableRow {
  background-color: white;
}
td + td {
  border-left: 1px solid #eee;
}
td,
th {
  border-bottom: 1px solid #eee;
  color: #000;
  padding: 10px 25px;
}
.table > thead > tr > th {
  height: 0 !important;
  line-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: transparent;
  border: none !important;
  white-space: nowrap;
  position: relative;
}
th div {
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 0;
  top: 0;
  line-height: normal;
  left: 50%;
  transform: translate(-50%);
  margin-top: -29px;
  z-index: 9999;
}
th:first-child div {
  border: none;
}
.md-scroll-mask {
  position: initial;
}

我在div的标题中插入出现在“section”中;问题是，当我插入div“tableRowArea”时，属性“overflow：auto”标题消失，而没有此属性则显示标题。我怎么看......：