div issues html,css

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?

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.

Your second div element overlaps your first div element, so you can't click it. Try setting a background-color to the second div. You won't see the first one anymore.

You shouldn't use position:absolute, unless you really need it, and there are other, much cleaner ways to get this layout, but a quick fix for your problem is, if you change your padding styles to margins, that way the spacing is not inside your div, so there is no overlapping, and you are able to click your element.