javascript - div 问题 html,css

Question

我的 html 文件中有以下代码，我在其中显示了两个可点击区域，一个位于另一个之上，但它只允许我点击一个。我可以看到两者，但我只能单击最后定义的那个。

<div style="visibility:hidden; position:absolute; padding-left:360px; padding-top:80px; float:left" id="colors">

<h2 style = "cursor:pointer" onclick="changecolor()">button1</h2>

</div>

<div style="visibility:hidden; position:absolute; padding-left:360px; padding-top:410px; float:left" id="stylescroll">

<h2 style="cursor:pointer" onclick="changedesign()">button2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>

</div>



function showt(){

        removeall();





        var hide = document.getElementById("center");
        hide.style.backgroundImage = "url(tshirts.jpg)";


        var shirt = document.getElementById("shirt");
        shirt.style.visibility = "visible";

        var move = document.getElementById("shirtmove");
        move.style.visibility = "visible";



        var logo = document.getElementById("advisory");
        logo.style.visibility = "visible";

        var button1 = document.getElementById("stylescroll");
        button1.style.visibility = "visible";

    var button = document.getElementById("colors");
        button.style.visibility = "visible";






    }

函数 showt 是使两个对象都可见的函数。因此，当调用该函数时，我可以看到 button1 和 button2 文本，但我无法与 button1 交互，button2 工作正常。

有什么想法吗？

Answer 1

不要使用“padding-top”(和“padding-left”)，只需使用“top”(和“left”)即可。

第二个 div 的填充与第一个 div 重叠，这就是您无法点击它的原因。