讨厌的小虫子，这个。
如Android ticket 6721 所示，当绝对定位的元素放置在<a> 或<input> 标记的顶部时，Android 浏览器似乎不尊重z-index。
我迫切需要任何解决方法。以前有人征服过这个吗？
提前致谢！
【问题讨论】：
标签： javascript html css android mobile-webkit
这个问题可能与控件及其对浏览器的特殊性有关。在查看您的问题（在铬中）时，我发现了一个相关问题，即当您按下 Tab 键时，您仍然可以聚焦输入元素。你可能也不想要这个（不管渗透如何）。解决方案非常简单，您编写脚本将disabled 属性添加到所有输入/按钮/等。被覆盖的元素。禁用的输入将 not be able to receive 聚焦（通过键盘或其他方式），并且应该无法单击它。
由于这也禁用了愚蠢的键盘环绕导航，因此它甚至不是一种解决方法，而是一种更好的设计，它也可以与预期的基于键盘的导航一起使用。
【讨论】：
要正确回答问题，阅读错误页面很重要。问题不在于下面输入的可见性，而在于它的“可点击性”。
我无法对其进行测试，但这些是可能的解决方法：
0 忘记绝对定位，只需将两个 div 放在那里并切换可见性。
如果这不能满足你...
1 尝试将所有 a 和 input 标记的 CSS 位置设置为绝对或相对（是的，这可能会迫使您重写 CSS 以保持布局，但这不值得吗？吗？）
2 制作一个<a>-tag 容器：
<div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
stuff here
</a></div>
这需要更多的 CSS 才能使内容看起来不错。但我希望这样的事情能解决问题。
如果 1 和 2 没有帮助同时尝试它们 ;)
3如果它仍然发生您可能需要详细检查单击时会发生什么。将 click 和 mousedown 事件绑定到：link on top、container on top、input in the bottom 并记录它们。如果您获得了顶部链接的任何这些事件，您可以尝试在某个时刻停止冒泡或阻止底部输入的事件。
这会很困难，但我可以提供一点帮助。 jQuery 将是非常必要的。
【讨论】：
过去针对 IE 的此问题的修复包括但可能不限于以下列表。这些可能会帮助您解决 Android 中的问题。
在绝对内容后面放置一个 iframe。 iframe 可能会为您遮挡这些元素
当您显示绝对内容时，使用 JavaScript 隐藏所有有问题的元素
以相反的顺序定义 div
第 1 点被认为是对 IE 最可靠的修复，但对您来说可能不是最好的修复。
【讨论】：
将此添加到每个产生问题的元素的 CSS 中：
-webkit-backface-visibility: hidden;
【讨论】：
用 DIV 模拟 INPUT 和 A。
[PSEUDO JQUERY CODE]
<div href="http://google.com" rel="a">Link</div>
<div class="field">
<div></div>
<input type="text" style="display: none" />
</div>
<script>
$('div[rel=a]).click(function() {
location.href = $(this).attr('href');
});
$('.field > div').click(function() {
$(this).hide();
$('.field > input').show();
});
$('.field > input').blur(function() {
$(this).hide();
$('.field > div').html($(this).val()).show();
});
</script>
【讨论】：
IE 也有同样的问题，解决方案是确保定位中涉及的每个元素甚至它们的容器都应用了 z-index。基本上，如果您将 z-index 添加到 dom 中的 1 个元素，则 IE 会了解其 z 位置，但不了解其相对于其旁边和/或上方的 z 位置。
容器 - z-index 0
孩子（在顶部容器上） - z-index 1
孩子 2（最重要的是） - z-index 999
当然，这都是基于愚蠢的 IE，但在 android 中也值得一试。
第二次尝试:)
我对安卓浏览器一点也不熟悉，但我希望能引导你找到解决问题的方法。 Superfish 是一个 javascript 菜单，当 z-index 菜单项下拉到浏览器中的选择框时，它实现了一种解决方案。 BgIframe 是他们用来实现这一点的 js。希望你的答案就在那里。
【讨论】：
将under html放在一个div中并使用javascript设置display:none，这样under的内容就消失了，而不是可点击和模态的。
【讨论】：
如果你想解决这个问题，首先你必须将 z-index 添加到 parent wrapper 并清楚地将 z-index 添加到你的其他元素，解决方案是所有元素都将具有一个零点来理解 z-index 属性正确
【讨论】：