Why does changing the stacking order depend on the webkit filter hanging?

Question

I noticed a strange problem with my stacking order when applying the webkit filter. Why, when I hover over the image, does the stacking order change?

I would prefer not to use z-indexing to fix this, since it breaks up other elements of the site.

Here is my JSFiddle http://jsfiddle.net/r13ycy1p/

Sorry Homer, I just need an image.

EDIT: How can I undo effects to prevent hiding the absolute position of the div?

Here is my 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

This is because a value other than none sets the stack context . This is described in spec (which is currently in the status of a working draft):

2 Interaction with the module

This specification defines a set of CSS properties that affect the visual rendering of elements to which these properties apply; these effects are applied after the elements have been positioned according to the visual formatting model from [CSS21]. Some values ​​of these properties lead to the creation of a containing block and / or the creation of a stacking context .

Also spec indicates:

5 Graphic filters: filter property

A calculated value other than none causes the stacking context [CSS21] to be created in the same way as CSS opacity.