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";






    }

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

有什么想法吗？

Answer 1

不要使用'padding-top'（和'padding-left'），只需使用'top'（和'left'）。

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

Answer 2

您的第二个div元素与第一个div元素重叠，因此您无法单击它。尝试将背景颜色设置为第二个div。你不会再看到第一个了。

你不应该使用position：absolute，除非你确实需要它，并且还有其他更简洁的方法来获得这种布局，但是如果你将填充样式更改为边距，那么快速解决问题就是方式间距不在你的div内，所以没有重叠，你可以点击你的元素。

div发布html，css

2 个答案: