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

Question

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

#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.

等其他浏览器中运行良好

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

Answer 1

我想 #footer 是 #btn_footer_01 的 parent。

理解z-index:

尝试将 parent 的 z-index 设置为更高的值，而不是将 child 设置得更高。 Child 将始终保持 'on the same level' 作为他们的 parent。例如。 parent 有 z-index:10;，而 child z-index:9000000; 比它作为 z-index 在 level 10 > level 9000000，所以 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;
}

Answer 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/）

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

CSS fixed position div not clickable in Android

android

css

position

fixed