Question

Im working on this project for work atm where an e-learning will be played on the samsung galaxy tab. the game is just a website but will be showed as app.

When you log in for the first time you will see a popup with this welcome message, behind it is a black overlay with transparancy.

The problem is that on the PC while on firefox it all works great but on the tablet the Z-index doesnt seem to work. its impossible to debug and I couldnt find any documentation on this issue.
So does anyone know if z-index works differently on the tablet or how do I fix it?

The pop up has z-index 999 and the overlay is z-index 998,
Any ideas on this?
I will continue my search on google and will post all the progress I make.

Edit:
The overlay will be created in Jquery:
var showPopup = ‘<%=ViewData(“showPopup”).toString()%>’

if (showPopup == "True") { $('body').prepend('<div class="overlay"></div>'); $('#welcomeBox').show(); }

Solved now, see comment for solution.

Answer 1

Found the answer,
the answer was partially on stackoverflow can be found here: Android Webkit: Absolutely positioned elements don't respect z-index

The rest was found in an tutorial.

The solution was the following:

I added the overlay in jQuery but the pop up was in the html but just hidden.
so I added that part of the code also to the jQuery check.
To prevent the pop up inheriting the opacity of the overlay I had to use the $('body').prepend again. It all works now.