安卓Webkit：绝对定位的元素不遵守z-index

Question

安卓Webkit：绝对定位的元素不遵守z-index

javascripthtmlcssandroidmobile-webkit

23

这个问题真是令人头疼。

正如在Android票号 6721中所示，当绝对定位的元素覆盖在<a>或<input>标签上时，Android浏览器似乎不会遵守z-index属性。我非常需要任何解决方法。有没有人在先前解决过这个问题呢？

提前感谢您！

- c_harm

看到您的代码示例会有所帮助，其中可以展示位于<a>和<input>标签上方的绝对定位元素。 - Capagris

我给了Paul de Vrieze奖励，但问题并没有真正解决。如果有人有其他想法，我很乐意听取！ - chuckharmston

试过了吗？我没有看到你的任何评论。 - naugtur

2

我不理解下面所有被踩（<0）的答案 - 所有这些答案都很准确并提供了帮助；也许它们不是“解决方案”，但仍然有用。投票回到0... - Oskar Austegard

8个回答

3

为了正确回答这个问题，重要的是读一下bug页面。问题不在于下面的输入框的可见性，而在于其“可点击性”。

我无法测试，但以下是可能的解决方法：

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

如果这不能满足您的需求...

1 尝试为所有a和input标签设置CSS位置（是的，这可能会强制您重新编写CSS以保持布局，但这不值得吗？）

2 制作一个a标签容器：

 <div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
     stuff here
 </a></div>

这需要一些CSS来使内容看起来好看。但我期望像这样的东西可以解决问题。

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

如果仍然发生，您可能需要详细检查单击时发生的情况。将点击和mousedown事件绑定到：顶部链接，顶部容器，底部输入，并记录它们。如果您获得了任何顶部链接的这些事件，则可以尝试在某个时刻停止冒泡或防止底部输入中的事件。

这可能有点困难，但我可以帮一点忙。 jQuery会非常必要。

- naugtur

好的，+1000（这可能吗？）我都快抓狂了。使用CSS设置每个项目的z-index(必须对元素和所有容器进行设置)解决了我的问题。谢谢你的提示。多亏了你，我又保住了一天的秃发。 - techdude

2

将以下代码添加到每个出现问题的元素的CSS中：

 -webkit-backface-visibility: hidden;

- frandroid

2

过去解决IE的这个问题的方法包括但不限于以下列表。这些方法可能有助于解决您在Android上遇到的问题。

在绝对定位内容后面放置一个iframe。该iframe可能会遮挡那些元素，从而帮助您解决问题。
当您显示绝对定位内容时，使用JavaScript隐藏所有存在问题的元素。
按相反的顺序定义div。

第1点被认为是解决IE问题最可靠的方法，但可能不是您最喜欢的解决方法。

- Fenton

1

使用 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>

- Ivo Sabev

0

IE存在同样的问题，解决方法是确保参与定位的每个元素以及它们的容器都应用了z-index。基本上，如果您在dom中添加一个元素的z-index，则IE会理解其z位置，但不理解其相对于旁边和/或上面的位置。

容器 - 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

- gravityone

1

它与IE问题有些不同; 在IE中，元素实际上没有按照规范显示。在Android Webkit中，它们是正确的，但是<a>和<input>元素的命中区域不正确。不过还是谢谢你的想法！ - chuckharmston

0

如果你想解决这个问题，首先你必须给父级包装器添加 z-index，并清晰地为其他元素添加 z-index。解决方案是所有元素都将具有零点，以正确理解 z-index 属性。

- sillencium

0

将下面的HTML代码放在一个div中，并使用JavaScript设置display:none，这样下面的内容就会消失，而不是可点击和模态的。

- user1131682

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul de Vrieze · Accepted Answer

这个问题可能与控件及其在浏览器中的特殊性有关。当我查看您的问题（在Chromium中）时，我发现一个相关的问题，即当您按下Tab键时，仍然可以将焦点放在输入元素上。无论是否出现渗透，您可能都不希望出现这种情况。解决方案非常简单，您可以编写脚本来向所有叠加的输入/按钮等元素添加disabled属性。禁用输入将无法接收焦点（通过键盘或其他方式），并且单击它应该是不可能的。

由于这也禁用了愚蠢的键盘绕过，因此它甚至不是一种解决方法，而是一种更好的设计，也符合预期的基于键盘的导航。