z-index is not working inside table

Question

Why z-index is not working inside table? I have a table with 4 column that one column is positioned outside of table, so that it seem as tabs, but I cannot hidden right side of tabs under table.

Please see this code snippet:

div {
  position: relative;
  z-index: 5;
  width: 70%;
  margin: auto;
  height: 500px;
  background-color: red;
}

table {
  border: none;
  border-spacing: 0 11px;
  width: 100%;
  table-layout: fixed;
}

td.tab {
  background-color: white;
  padding: 15px;
  width: 20%;
  position: absolute;
  z-index: -15;
  right: 90%;
}

td.plan {
  padding: 15px;
  width: 33.3%;
  text-align: center;
}

<div class="bottom">
  <table>
    <tbody>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
    </tbody>
  </table>
</div>

fiddle code

EDIT: I no want tabs, I will add our plans to site. I update fiddle, I want remove this shadow on right side of tabs.

why not go with a width of `td.tab { width: 10%;}` and `right: 100%;` — Toxide82, Mar 08 '17 at 12:17
Why do you need to hide half of the tabs under the table? Would there be any difference, visually, if you just left them in their original position, just with the different background color? — domsson, Mar 08 '17 at 12:18
on your box shadow on the first value change it to `-5px;` and this will pull the shadow to the left away from the right side — Toxide82, Mar 08 '17 at 12:59

Abhitalks · Accepted Answer · 2017-03-08T15:28:55.000

Your td tabs are positioned absolutely but relative to the div.bottom.

Easiest is to remove the z-index on the parent.

Fiddle: https://jsfiddle.net/abhitalks/bxzomqct/7/

Snippet:

div {
  position: relative;
  width: 70%;
  margin: auto;
  height: 500px;
  background-color: red;
}

table {
  border: none;
  border-spacing: 0 11px;
  width: 100%;
  table-layout: fixed;
}

td.tab {
  background-color: #eee;
  padding: 15px;
  width: 20%;
  position: absolute;
  z-index: -15;
  right: 90%;
}

td.plan {
  padding: 15px;
  width: 33.3%;
  text-align: center;
}

<div class="bottom">
  <table>
    <tbody>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
    </tbody>
  </table>
</div>

Better still, to avoid confusions, Just wrap your entire construct in another div and position the tabs relative that outer div.

div.top {
  position: relative;
  width: 70%;
  margin: auto;
}
div.bottom {
  background-color: red; z-index: 50; height: 500px;
}

table {
  border: none;
  border-spacing: 0 11px;
  width: 100%;
  table-layout: fixed;
}

td.tab {
  background-color: #eee;
  padding: 15px;
  width: 20%;
  position: absolute;
  z-index: -150;
  right: 90%;
}

td.plan {
  padding: 15px;
  width: 33.3%;
  text-align: center;
}

<div class="top">
<div class="bottom">
  <table>
    <tbody>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
    </tbody>
  </table>
</div>

</div>

Your Fiddle: https://jsfiddle.net/abhitalks/bxzomqct/6/

Why this happens:

This is because of the stacking context that is generated by the positioned elements. Although, the stacking order within a stacking context specifies the negative z-index values to be painted first, it is however limited to that same stacking context.

Reference: https://www.w3.org/TR/CSS2/zindex.html

Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

So, with a negative z-index, your tabs should appear behind its parents (div.bottom in this case). And it will, as it is in same stacking context.

However, as soon as you give a z-index value to the div.bottom, it creates a new stacking context which confines all of its child elements to a particular place in the stacking order. This causes it not to appear in front of the tabs irrespective of the z-index of tabs.

Note that the specs do not explain this verbatim, and has to be referred to with other references and docs to develop an understanding. It's tricky.

Here is a good article you can refer to: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

thank you so much, but can you explain for me, why it will work when we remove **z-index** on `div.bottom`? — ghanbari, Mar 08 '17 at 12:51
@ghanbari that's how negative indices work on absolutely positioned elements in relation to their relatively positioned ancestor. I am away right now. Let me see if could find some ref when am back. — Abhitalks, Mar 08 '17 at 12:55

score 0 · Answer 2 · edited May 23 '17 at 12:25

In your example, z-index won't work because you use it with two elements which are not in the same level in the DOM.

To make it works, you can place the two element with relative or absolute position in the same DOM level.

Doc about z-index: https://stackoverflow.com/a/2305711/6028607

div {
  position: relative;
  z-index: 5;
  width: 70%;
  margin: auto;
  height: 500px;
  background-color: red;
}

table {
  border: none;
  border-spacing: 0 11px;
  width: 100%;
  table-layout: fixed;
}

td.tab {
  background-color: white;
  padding: 15px;
  width: 20%;
  position: absolute;
  z-index: -15;
  right: 90%;
}

td.plan {
  padding: 15px;
  width: 33.3%;
  text-align: center;
  z-index: 0;
  position: relative;
}

.test { z-index: 0; position: absolute; top: 200px; background:yellow; width: 100%; left: 0; height: 40px; padding: 10px;  }

<div class="bottom">
  <table>
    <tbody>
      <tr>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="test">test</div>

_“`z-index` property works with element which are in the same DOM level”_ - you make it sound like it would _only_ work then, but that is of course not true … — CBroe, Mar 08 '17 at 12:20
Yes, maybe the formulation I use is not right, the best solution would be to include a correct definition in my answer, I will do that — Vincent G, Mar 08 '17 at 12:24

z-index is not working inside table

2 Answers2

Linked