爲什麼webkit過濾器懸停時堆疊順序發生變化？

Question

當我應用webkit過濾器時，我發現我的堆疊順序存在一個奇怪的問題。爲什麼當我將鼠標懸停在圖像上時，堆疊順序會發生變化？

我寧願不必使用z-indexing來解決這個問題，因爲它會破壞其他網站元素。

這裏是我的jsfiddle 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> 

的CSS

li { 
list-style:none;  
} 

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

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

Answer 1

這是因爲比其他none值建立stacking context。這在spec記載（這是目前在工作狀態草案）：

2 Module interactions

該規範定義了一組影響元件的 視覺呈現的CSS屬性到那些屬性被應用; 這些效果在元素大小調整後應用，並且根據[CSS21]中的可視格式模型定位 。這些屬性的某些值導致創建包含 塊，和/或創建堆棧上下文。

而且該規範規定：

5 Graphic filters: the filter property

的以外none導致產生一個 堆疊上下文 [CSS21]的方式，CSS相同的計算值不透明度。