Question

I have the following code in my html file, where I display two clickable areas one on top of the other, however it only lets me click one. I can see both but I can only click the one that is defined last.

<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 is the function that makes both objects visible. So when that function is called I can see both button1 and button2 text, but I can’t interact with button1, button2 works fine.

Any ideas?

Answer 1

Instead of using ‘padding-top’ (and ‘padding-left’), just use ‘top’ (and ‘left’).

The second div’s padding is overlapping the first div that’s why you can’t click it.