0

I was stuck with one CSS stacking context issue, I simplified it to following simple case.

A simple table as following code, I translated header in order to achieve scrolling effect, while the header was always covered by those translated td cells.

I have read several articles, including that famous one "What No One Told You About Z-Index", and try to add both translate and z-index css properties on thead and tbody, and I 'guess' they should be in the same stacking context, so z-index will work, while I failed, does the failure due to table has some special constraints on stacking context? The only solution I can find now is switching thead and tbody position in the html by putting thead after tbody tag.

Full Case is here.

.m-table {
  width: 40%;
  font-size: 14px;
  text-align: center;
  border: 1px solid #e6eaf9;
  background: #fafbff;
  transform: translateY(0);
}

.m-table th,
.m-table td {
  padding: 16px;
  border: 1px solid #ddd;
  background: #effff0;
}

.m-table th {
  background: #e6eaf9;
}

.m-table thead {
  transform: translateY(25px);
  margin-bottom: 10px;
}

td label.u-angle {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #79c5ff;
  transform: rotate(45deg);
}
<table class="m-table">
  <thead>
    <tr>
      <th>Price</th>
      <th>Algorithm Factor</th>
      <th>Links</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$1,326</td>
      <td>
        <label class="u-angle"></label>
      </td>
      <td>
        <a href="javascript:void(0);">Detail</a>
      </td>
    </tr>
  </tbody>
</table>
j08691
  • 204,283
  • 31
  • 260
  • 272
Hong Wang
  • 93
  • 2
  • 11
  • 2
    Each element to use z-index needs to have css "position" propety set on it: https://stackoverflow.com/questions/9191803/why-does-z-index-not-work – S.Mason Aug 14 '17 at 14:33
  • I had already tried to add both translate and z-index css properties on thead and tbody, and thead with larger z-index, and add translate property on table, and the table should be their same sharing stacking context, while the larger z-index setting did not work. – Hong Wang Aug 14 '17 at 14:43
  • @HongWang No, you should use the `position` property. – Mr Lister Aug 14 '17 at 18:39
  • @MrLister I also try that, it does not work. – Hong Wang Aug 15 '17 at 01:08
  • @MrLister, if I replace thead and tbody with div, it works. While for table elements, it fails, so I guess table may have some special constraints on stacking context. – Hong Wang Aug 15 '17 at 01:23
  • @HongWang That is certainly a possibility, yes. Tables also respond differently to, say, width properties. – Mr Lister Aug 15 '17 at 06:53

0 Answers0