IE11 not recognizing z-index: -1

Question

I have a table that uses box-shadow when hovering on rows to display some styling. This was working fine until I discovered that in IE11 it not working.

The problem seems to be that using a z-index: -1 to avoid the td being above tr is not working as expected in IE11.

table td {
  position:relative;
  background-color: #EFEFEF;
  z-index: -1;
}

I have created a fiddle that works in chrome but not in IE11: https://jsfiddle.net/pjz43a52/8/

So my questions are:

• Is there any known issue with IE11 and z-index: -1? I found things related to z-index but not to this case specifically.
• How can I solve this? I tried different things but none of them working without breaking the current behavior which is to have the box-shadow on top of the td.

Any ideas?

Answer 1

<table> is cancer...

Although I don't know WHY exactly such behaviors happen... But yeah - that's compatibility issues and we've to hack around it, so if we re-use the same code you wrote before, but instead of using a <table> we will use only <div>, the result will be the same, but it will work on IE11 - I tested it for you!

.container {
  background-color: #fafafa;
  z-index: 0;
}

.table {
  position: relative;
  width: 100px;
  z-index: 1;
  border-spacing: 0px;
  border-bottom: 1px solid black;
}
.table .col {
  position:relative;
  background-color: #EFEFEF;
  z-index: -1;
  border-top: 1px solid black;
  border-right:  1px solid black;
  border-left:  1px solid black;
}
.table .row:hover {
  position: relative;
  box-shadow: 
    inset 5px 0 0 #dadce0, 
    inset -3px 0 0 #dadce0, 
    0 5px 2px 0 rgba(60,64,67,.3), 
    0 5px 3px 1px rgba(60,64,67,.15);
}

<div class="container">
  <div class="table">
    <div class="row">
      <div class="col">Some Value</div>
    </div>
    <div class="row">
      <div class="col">Some Value</div>
    </div>
    <div class="row">
      <div class="col">Some Value</div>
    </div>
  </div>
</div>

Answer 2

Is there any known issue with IE11 and z-index: -1?

This is likely not related to z-index directly, but due to the fact that CSS 2.1 specified that,

The effect of position:relative on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. (https://www.w3.org/TR/CSS2/visuren.html#propdef-position)

This restriction has been lifted with the CSS 3 Positioning Module - but that doesn’t necessary mean, IE has kept up.

If you nest an additional element into your table cells and apply position, z-index and background to that, you should be able to get this basically working, https://jsfiddle.net/pjz43a52/10

Answer 3

Since you are setting the Z-Index property, when you using F12 developer tools (using IE 11) to select the elements, you can only select the table elements, instead of the tr, so, it will not trigger the hover action. Screenshot as below:

To solve this issue, you could add the following CSS style:

table tr{
    display:block;                    
}

Then, when using F12 developer tools to select elements, we could select the table row. Thus, it will trigger the hover action.

The test sample as below:

<style type="text/css">

    table {
        position: relative;
        z-index: 1;
        border-spacing: 0px;
        border-bottom: 1px solid black;
    }

        table td {
            border-top: 1px solid black;
            border-right: 1px solid black;
            border-left: 1px solid black;
        }
        table tr{
            display:block;
        }

    .container {
        background-color: #fafafa;
        z-index: 0;
    }

    table td {
        position: relative;
        background-color: #EFEFEF;
        z-index: -1;
    }

    table tr:hover {
        position: relative;
        box-shadow: inset 5px 0 0 #dadce0, inset -3px 0 0 #dadce0, 0 5px 2px 0 rgba(60,64,67,.3), 0 5px 3px 1px rgba(60,64,67,.15);
    }
</style>
<div class="container">
    <table>
        <tbody>
            <tr>
                <td>Some Value</td>
            </tr>
            <tr>
                <td>Some Value</td>
            </tr>
            <tr>
                <td>Some Value</td>
            </tr>
        </tbody>
    </table>
</div>

The result: