. then i have full-page overlay that opens upon clicking a button… and this one have a z-index of 999. Still the header is shown on top.
Ultimately its the positioned parent of an element that determines the stacking index of all the children no matter what their z-index. If a positioned parent has a z-index other than auto (say z-index:1 for example) then it will be no use having a child with a z-index of 1 million as it will not overlay an element outside this current context where that other element only has a z-index of 2. The child with a z-index of one million will of course be on top of all the other elements within it’s parent’s context; but outside the parent’s context the child’s z-index will be the same as the parent.
So what this means is that you must go up the dom from the element you are testing and make sure that if there is a positioned parent then its these parents you must address for the stacking order. Also note that only positioned elements can have a z-index applied. If you apply a z-index to a non positioned element then it is ignored. This means for static elements you must add position:relative (without coordinates) for the element to partake in the stacking strategy.
lol ![]()
Browsers do have number limits and in Firefox the z-index limit is 2147483647. Try increasing it in Firebug and you will see it won’t go any higher.
There are similar limits for dimensions and margins etc. (This used to be the margin limit in opera ‘margin-top:-32767px;’.)
IE has limits on css rules.