webkit-filter改变z-index堆叠顺序

Question

为什么应用webkit过滤器会更改图层顺序？

见这个最小的例子：

＆＃13;

＆＃13;

setInterval(function(){

	t.classList.toggle('grayed');
    
}, 1000)

＆＃13;

.floater {
    position: fixed;
    top: 5vh;
    left: 5vw;
    width: 90vw;
    height: 90vh;
    z-index: 99;
    background: yellow;
    display: none;
}
td:hover .floater{
    display: initial;
}

.grayed td{
    -webkit-filter: grayscale(0.5);
}

td{
    padding: 1em;
    text-align: center;
    background: blue;
}

＆＃13;

<table id="t">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5<br>
            (Mouse over this)
            <div class="floater">HELLO</div>
        </td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

订单会发生变化，因为当渲染效果时，它会移动到不同的堆叠上下文（或“图层”）。我找到的解决方案是将具有此效果的元素放在前面的任何内容之后。

将鼠标悬停在左右角上的按钮上。 http://aminhafamilia.com.br/layout-options/4.html http://aminhafamilia.com.br/layout-options/4a.html

页面4.html正确显示，而页面4a.html没有。唯一的区别是我想在顶部显示的文本实际上是在标题之后（具有过滤器）。请注意，没有z-index可以修复它，因为它们不在同一堆栈上下文中。向下移动会改变堆叠环境。

Answer 2

• Child z-index设置为与其父级相同的堆叠索引，因此它无法正常工作。
• 如果您愿意将浮动内容从其父表中删除，您可以使用mouseover＆amp; mouseout（关闭）。

setInterval(function() {
  t.classList.toggle('grayed');
  document.querySelector('.floater').classList.toggle('grayed');
}, 1000)

document.querySelector('.toHover').addEventListener('mouseover', function() {
  document.querySelector('.floater').classList.add('open');
})
document.querySelector('.floater').addEventListener('mouseout', function() {
  document.querySelector('.floater').classList.remove('open');
})

.floater {
  position: fixed;
  top: 5vh;
  left: 5vw;
  width: 90vw;
  height: 90vh;
  z-index: 1;
  background: yellow;
  display: none;
}

.grayed td {
  -webkit-filter: grayscale(0.5);
}

.grayed {
  -webkit-filter: grayscale(0.5);
}

.open {
  display: initial;
}

td {
  padding: 1em;
  text-align: center;
  background: blue;
}

<table id="t">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td class="toHover">5<br> (Mouse over this)
      <div>HELLO</div>
    </td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

<div class="floater">HELLO</div>