A better process to find maximum z-index within a page

Once I needed to get maximum z-index of a DIV to show message at the top of the screen.
Usually, I used arbitrary z-index of 100 of the DIV. But that one is not at the top and it’s hidden by others.
What’s wrong? And unfortunately I found that there are 3 more div-s which have z-index attribute which are greater than 100.
So I changed the z-index to 1000. This time I can see one portion of the DIV.
But 2 more elements get the desired message container DIV overlaid. Frustrating! Huh!
Trial and error method always makes you delay.
I know JavaScript or jQuery may get rid of this hell.
I made an absolute tinny code to find the highest z-index of absolute DIV
to show my shouting box and to make it appear absolutely at the top of all html elements.

//include jQuery.js --  visit: http://jquery.com/
$(function(){
    var maxZ = Math.max.apply(null,$.map($('body > *'), function(e,n){
           if($(e).css('position')=='absolute')
                return parseInt($(e).css('z-index'))||1 ;
           })
    );
    alert(maxZ);
});

I used selector of ”body > *‘ instead of ‘body *‘.

”body > *‘ means all tags/elements which are found at first depth of
whether ”body *‘ selects all tags/elements at any depth.
It doesn’t matter what’s is the maximum/highest z-index of an absolute element
rather it matters what’s the maximum/highest z-index of the absolute elements
which are next to in first depth only to show the shouting box on top most strata.

N.B. Shouting box is appended to document.body in this case.

rahen 31 January 2009 at 12:34 am #

my script is floated left side !!! :(
adnan 31 January 2009 at 6:04 am #

I fixed that :)
rahen 31 January 2009 at 8:19 am #

it messed up again during editing my post.
zp 7 February 2009 at 5:40 pm #

i am not sure though, but, i think, $(e).css(“z-index”) should not work. you have to use $(e).css(“zIndex”). please check that.
rangan 7 February 2009 at 6:27 pm #

both works!:D i checked before. i’m using jquery-1.6.2.js
C Snover 24 April 2009 at 2:20 am #

You should really be checking for $(e).css('position') != 'static' instead. All positioned elements receive an order on the stack. Ref: CSS 2.1 § 9.9.1.

Regards,
chb908 3 June 2009 at 6:06 am #

birthday gift
santiago 23 January 2010 at 9:44 am #

thanks a lot for this, it’s the only solution i found that works fine in every major browser
rahen 30 January 2010 at 12:47 am #

I’m so glad to know that my code helpd you :)
Maya Campbell 28 April 2010 at 9:06 am #

I have been perusing a few of your posts and have enjoyed it. Keep it up