CODEWITHSUNDEEP
cssinternet-explorer-8css-positionz-indexpseudo-element
Ziik
Ziik

Reputation: 1049

Negative :before z-index on absolutely positioned element not working in IE8

I've searched about this problem and know that IE8 has quirks rendering elements with pseudo tags but couldn't find solution for my problem. I'm trying to position absolutely an element and add to it a pseudo :before element which must be beneath its parent.

Using:

.container:before {
    z-index: -1;
}

do the trick with Firefox and Chrome but not on IE; Here's the fiddle http://jsfiddle.net/WaTnn/

How can I position the yellow element beneath the red in IE8 and still have it's parent be absolutely positioned?

Upvotes: 3

Views: 3371

Answers (2)

Ziik
Ziik

Reputation: 1049

I've found a working solution:

  1. Add a relatively positioned div inside the container
  2. Set its z-index: -1
  3. Add the :before element to the div not to the container.

Here's a fiddle http://jsfiddle.net/WaTnn/3/

If someone has a better solution, I'd be happy to see it.

Upvotes: 5

Paja Aleksic
Paja Aleksic

Reputation: 191

As it says here: link

IE8 Partial Support
z-index not respected, must use a doctype, must declare a :hover state if you use :hover:after/:hover:before

Upvotes: 1

Related Questions