CSS固定位置div在Android中不可点击答案

【问题标题】：CSS fixed position div not clickable in AndroidCSS固定位置div在Android中不可点击
【发布时间】：2016-02-09 09:02:12
【问题描述】：

我有一个固定定位的页脚，其中包含如下按钮：

#footer {
    position: fixed;
    bottom:0;
    width: 100%;
    height: 40px;
    background: #97d700;    
    -webkit-backface-visibility: hidden;
}

#btn_footer_01 {
    position: absolute;
    top: 20%;
    margin-left: 5.13%; 
    width: auto;
    height:auto;
    z-index: 9000000;
    -webkit-backface-visibility: hidden;
}

我们希望页脚贴在视口底部，并希望能够单击 btn_footer_01 div。但是，在 Android（目标 sdk 为 17）中，按钮的 onClick() 事件不起作用。它在其他浏览器（如 chrome）中运行良好。

对此有什么解决方法？任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： android css position fixed

【解决方案1】：

我想#footer 是#btn_footer_01 的父级。

了解 z-index：

尝试将父级的z-index 设置为更高的值，而不是将子级设置得更高。孩子将永远与他们的父母保持“同一水平”。例如。父级有z-index:10;，子级有z-index:9000000;，它在级别10 > 级别9000000 上充当z-index，所以10.9000000。

在您的情况下，请尝试以下操作：

CSS

#footer {
    position: fixed;
    bottom:0;
    width: 100%;
    height: 40px;
    background: #97d700;    
    -webkit-backface-visibility: hidden;
    z-index: 9000000;
}

#btn_footer_01 {
    position: absolute;
    top: 20%;
    margin-left: 5.13%; 
    width: auto;
    height:auto;
    -webkit-backface-visibility: hidden;
}

【讨论】：

我试过但不幸的是它不起作用。相同的代码在 android 5.1.1 中有效，但在 4.2.2 中无效。
我不是 android 开发专家。你在每个 android 上使用相同的浏览器版本吗？
我使用同一个WebView来加载html内容。
在这种情况下它应该可以工作我猜......我在你的代码中找不到另一个错误。

【解决方案2】：

我决定不使用固定定位来处理各种设备，包括搭载 Android 4.2.2 的设备。所以，我使用了绝对定位：

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

（关于这个话题有一篇很好的文章在：http://mystrd.at/modern-clean-css-sticky-footer/）

【讨论】：