0

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;
padding-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.

enter image description here

Sean Anderson
  • 27,963
  • 30
  • 126
  • 237

1 Answers1

1

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.

scrappedcola
  • 10,423
  • 1
  • 32
  • 43
  • I believe that it depends on the browser, but the general cap is closer to 10k I believe. See http://stackoverflow.com/questions/491052/mininum-and-maximum-value-of-z-index/491105#491105 for more info. – josh.trow Sep 29 '11 at 17:34
  • According to [the spec](http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index), there's no defined maximum value. I've used over 100 with no problems in the past. – Richard Marskell - Drackir Sep 29 '11 at 17:37
  • Ahhh, trivial mistake... should've known that. Oh well. Thank you very much, I will accept the answer when I am able to. This works. – Sean Anderson Sep 29 '11 at 17:39