Div is laying ontop of absolute-positioned element. How to put element above the div?

I have a couple of controls on the page. One of which is a button, another is div with width: 100%. The button has position: absolute.

My buttons CSS -- just playing around with it for now:

.toggleButton
{
    z-index: 99999999px;
    position: absolute;
    margin-top: 2px;
    right: 130px;
}

The div is automatically generated, but here's its computed style:

background-color: transparent;
clear: both;
color: dimGray;
display: block;
font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 11px;
height: 26px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
pa开发者_Python百科dding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
width: 1026px;

I'm wondering how to place the button over the div. In its current state the button isn't able to be clicked in all spots. I'm not looking to restrict the width of the div, just place the button over it.

z-index is not in a px unit. So set your z-index of the div to 1 and set the z-index of the button to 20.

.toggleButton
{
    z-index: 20;
    position: absolute;
    margin-top: 2px;
    right: 130px;
}

I need a reference for this but I'm pretty certain z-index is capped at 100 so funky huge numbers like 9999999 just gets considered 100.