Android Webkit:绝对定位的元素不尊重z-index

令人讨厌的小虫子,这个。

如Android票证6721所示 ,当绝对定位的元素位于标记的顶部时,Android浏览器似乎不尊重z-index。 我迫切需要任何解决方法。 以前有人征服过这个吗?

提前致谢!

Solutions Collecting From Web of "Android Webkit:绝对定位的元素不尊重z-index"

此问题可能与控件及其对浏览器的特殊关系有关。 在查看你的问题(铬)时,我发现了一个相关的问题,当你按Tab键时,你仍然可以聚焦输入元素。 你可能也不想要这个(不管渗透)。 解决方案非常简单,您编写脚本以将disabled属性添加到所有输入/按钮/等。 被覆盖的元素。 禁用的输入将无法获得焦点(通过键盘或其他方式),并且无法单击它。

由于这也禁用了愚蠢的键盘环绕,它甚至不是一种解决方法,而是一种更好的设计,也可以按预期使用基于键盘的导航。

要正确回答这个问题,请务必阅读错误页面。 问题不在于下面输入的可见性,而在于它的“可点击性”。

我无法测试它,但这些是可能的解决方法:

0忘记绝对定位,只需在其中放置两个div并切换可见性。

如果这不满足你……

1尝试将CS​​S位置设置为所有ainput标签的绝对或相对(Yup,这可能会强制您重写CSS以保持布局,但是不值得吗?)

2创建一个 -tag容器:

   

这将需要更多的CSS来使内容看起来不错。 但我希望这样的事情可以解决问题。

如果1和2没有帮助同时尝试它们;)

3如果仍然发生您可能想要查看详细信息,单击时会发生什么。 将click和mousedown事件绑定到: link on top container on topinput in the bottom并记录它们。 如果您获得顶部链接的任何事件您可以尝试在某个时刻停止冒泡或阻止底部输入的事件。

这很难,但我可以帮助一下。 jQuery是非常必要的。

IE的此问题的过去修复包括,但可能不限于以下列表。 这些可能有助于您解决Android中的问题。

  1. 将iframe放在绝对内容后面。 iframe可能会为您隐藏这些元素

  2. 显示绝对内容时,使用JavaScript隐藏所有问题元素

  3. 以相反的顺序定义div

点号1被认为是IE最可靠的解决方案,但可能不是最好的解决方案。

将此添加到创建问题的每个元素的CSS中:

  -webkit-backface-visibility: hidden; 

使用DIV模拟INPUT和A.

 [PSEUDO JQUERY CODE] 
Link

IE有同样的问题,解决方案是确保定位中涉及的每个元素甚至它们的容器都应用了z-index。 基本上,如果你在dom中向1个元素添加一个z-index,那么IE就会理解它的z位置但是不了解它相对于它的下一个和/或哪个的z位置。

container – z-index 0
孩子(在顶部容器上) – z-index 1
孩子2(首先) – z-index 999

当然这都是基于愚蠢的IE,但它也值得一试。


第二次尝试:)

我根本不熟悉android浏览器,但我希望可能会引导你走上解决问题的道路。 Superfish是一个javascript菜单,当它们下拉到浏览器中的选择框时,它已经实现了z-index菜单项的解决方案。 BgIframe是他们用来实现这一目标的js。 希望你的回答可能就在那里。

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

将html放在div中并使用javascript设置display:none,这样底层内容就会消失,而不是可点击和模态。

如果你想解决这个问题,首先你必须将z-index添加到父包装并明确地将z-index添加到其他元素,解决方案是所有元素都将正确地理解z-index属性的零点