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

时间:2017-08-18 15:23:42

标签: css

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

见这个最小的例子:



setInterval(function(){

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

.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;
}

<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;

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

  • 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>