-4

我刚刚完成了一个网站，一切正常（我的想法）直到我发现一个无法修复的巨大 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>
4

1 回答 1

1

您的问题在于 IMO 对absolute元素定位的使用不当。滚动页面后，实际“命中”占位符的位置会随页面移动，但不会随背景移动。

测试用例：尝试将您的页面向上移动一点，您将能够“单击”实际按钮上方。

除非您有充分的理由使用绝对定位元素，否则您static的大多数元素都使用 == 默认定位。

于 2012-11-19T16:35:34.277 回答