Search

3/19/2009

IE z-index bug

IE z-index bug - 在ie下多包了一個 position: relative 的 warpper 會造成 yellow box 的 z-index變成0.20,輸給 lime box 的 10,可以在 position:relative 的 element 上面加上 z-inex:20,變成20.10大於lime box 的 10

Basically the fact that the yellow box is wrapped in a relative positioned element should not effect the stacking order: the CSS specification clearly states that only positioned elements that have a computed z-index value other than 'auto' generate a new stacking context. The relative positioned element does not have a z-index value defined, so it should not influence the stacking order of it's child-elements.

It appears that in Internet Explorer (windows) positioned elements do generate a new stacking context, starting with a z-index value of 0, causing the lime-green box to appear above the yellow box.

This is a serious violation of the CSS specifications, causing headages and a lot of misunderstanding of what z-index really does.

沒有留言: