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

javascript html css android mobile-webkit
c_harm picture c_harm · Apr 1, 2010 · Viewed 17.1k times · Source

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 the top of <a> or <input> tags. I am desperate for any sort of workaround. Has anybody conquered this one before?

Thanks in advance!

Answer

Paul de Vrieze picture Paul de Vrieze · Apr 8, 2010

This problem is probably related to controls and their being special for the browser. While looking at your problem (in chromium) I found a related problem that when you press the tab key you will still be able to focus the input elements. You probably don't want this either (regardless of bleedthrough). The solution is surprisingly simple, you write your script to add the disabled attribute to all input/button/etc. elements that are overlayed. A disabled input will not be able to receive focus (by keyboard or otherwise), and clicking it should be impossible.

As this also disables silly keyboard circumnavigation it is not even a workaround, but a better design that also works with keyboard based navigation as expected.

Related questions

Position fixed not working in mobile browser

How to make an element position fixed in Mobile browser (ios and android) ? Element still scrolls with below code in ios < 5 and android< 4 <html> <head> <style> .fixed{ position:fixed; top:0; left:0; } </…

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More