title: stacking context on table element(head and body)
body: <p>I was stuck with one CSS stacking context issue, I simplified it to following simple case.</p>
  
  <p>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.</p>
  
  <p>I have read several articles, including that famous one <code>"What No One Told You About Z-Index"</code>, and try to add both <em>translate</em> and <em>z-index</em> css properties on <code>thead</code> and <code>tbody</code>, and I <em>'guess'</em> they should be in the same stacking context, so <em>z-index</em> will work, while I failed, does the failure due to <code>table</code> has some special constraints on stacking context? The only solution I can find now is switching <code>thead</code> and <code>tbody</code> position in the html by putting <code>thead</code> after <code>tbody</code> tag.</p>
  
  <p>Full Case is <a href="https://codepen.io/llwanghong/pen/XaMgzZ" rel="nofollow noreferrer">here</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="m-table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Price&lt;/th&gt;
        &lt;th&gt;Algorithm Factor&lt;/th&gt;
        &lt;th&gt;Links&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;$1,326&lt;/td&gt;
        &lt;td&gt;
          &lt;label class="u-angle"&gt;&lt;/label&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;a href="javascript:void(0);"&gt;Detail&lt;/a&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>