Android Webkit: Absolutely positioned elements don't respect z-index

Question

Nasty little bug, this one.

As illustrated in Android ticket 6721, the Android browser seems to not respect z-index when absolutely positioned elements are laid over

Answer 1

Past fixes for this issue for IE include, but are probably not limited to the following list. These may help solve the problem in Android for you.

1. Put an iframe behind the absolute content. The iframe may obscure those elements for you

2. When you display your absolute content, hide all of the problem elements with JavaScript

3. Define the div's in the opposite order

Point number 1 is deemed the most reliable fix for IE, but may not be the nicest fix for you.

Answer 2

IE has this same problem and the solution there is to make sure that every element that is involved in the positioning and even their containers have a z-index applied to them. Basically if you add a z-index to 1 element in the dom then IE gets understands its z position but doesn't understand its z position relative to what its next to and/or over.

container - z-index 0
child (on top container) - z-index 1
child 2 (above all) - z-index 999

Of course this is all based on stupid IE but its worth a try in android also.

---

Second Try :)

I am not familiar with the android browser at all, but I hope to maybe lead you down a path to solve your issue. Superfish is a javascript menu that has implemented a solution for z-index menu items when they drop down over select boxes in browsers. BgIframe is the js that they use to achieve this. Your answer may lie there, hopefully.

http://users.tpg.com.au/j_birch/plugins/superfish/#sample2