Question

我刚刚完成一个网站，一切正常（我的想法）直到我发现一个无法解决的巨大BUG：

我有一个导航栏（png文件）并在其上添加了按钮（简单的DIV元素），当页面打开时，一切都很好，但如果你滚动页面一点，按钮就不能正常工作他们应该。

请检查此链接:(向下滚动页面，您会发现该按钮不再进行交互）

http://www.genius-solutions.net/GSIS/index.html

但是如果你将光标移动到按钮上方，你会发现它们：

（HTML - JavaScript）

这里是CSS部分：

#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}

#html, body {
    background:#002a4c;
    overflow:scroll;
    width:1024px;
    height:768px;
    margin: 20px auto; /* center */ padding: 20px;

}

这里是HTML部分：

    <body >
    <div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>

       <div id='applet_t'>

            <div id='btn'>
                <div id='btn1'></div>
                <div id='btn2'></div>
                <div id='btn3'></div>
                <div id='btn4'></div>
                <div id='btn5'></div>
                <div id='btn6'></div>
            </div>

    </div>
        <div id='inf'></div>


    </div>

</body>

Answer 1

您的问题在于IMO非常不正确地使用absolute元素的定位。滚动页面后，实际“点击”占位符的位置随页面移动而不是您的背景。

测试用例：尝试将页面向上移动一点，您就可以在实际按钮上方“点击”。

除非你有充分的理由让绝对定位的元素使用static ==大多数元素的默认定位。

滚动页面会导致按钮出现问题

1 个答案: