为什么 webkit 过滤器悬停时堆叠顺序会发生变化？

在应用 webkit 过滤器时，我注意到堆叠顺序存在一个奇怪的问题。为什么当我将鼠标悬停在图像上时，堆叠顺序会发生变化？

我宁愿不必使用 z 索引来解决此问题，因为它会破坏其他网站元素。

这是我的 JSFiddlehttp://jsfiddle.net/r13ycy1p/ http://jsfiddle.net/r13ycy1p/

请原谅荷马，我只需要一张图片。

编辑：如何反转效果以阻止绝对位置 div 被隐藏？

这是我的 HTML

<ul>
<li>
    <a href="#">
        <div class="slide-content">
            <div class="slide-title">
                <h1>hello world</h1>
            </div>
            <div class="slide-desc">
                <p>a description about something</p>
            </div>
        </div>
        <img src="http://img4.wikia.nocookie.net/__cb20130920142351/simpsons/images/e/e9/Pic_1187696292_8.jpg"/>

    </a>
</li>
</ul>

The CSS

li {
list-style:none;    
}

.slide-content {
position:absolute;
color:red;
top:50px;
}

li a:hover img{
-webkit-filter: grayscale(100%); /* For Webkit browsers */
}

这是因为除了none建立一个堆叠上下文 http://www.w3.org/TR/CSS21/zindex.html。这记录在spec http://dev.w3.org/fxtf/filters/（目前处于工作草案状态）：

2 模块交互 http://dev.w3.org/fxtf/filters/#placement

该规范定义了一组影响CSS属性 应用这些属性的元素的视觉呈现； 这些效果在元素大小调整后应用 根据 [CSS21] 中的视觉格式化模型定位。一些 这些属性的值结果创建了一个包含 块，和/或创建堆叠上下文.

规范还指出：

5 图形过滤器：过滤器属性 http://dev.w3.org/fxtf/filters/#FilterProperty

计算出的值不为none 结果创建了一个 堆叠上下文[CSS21] 与 CSS 不透明度的作用相同。