Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can you figure out the highest z-index in your document?

In order to set a div containing a transparent text image as the highest z-index in my document, I picked the number 10,000 and it solved my problem.

Previously I had guessed with the number 3 but it had no effect.

So, is there a more scientific way of figuring out what z-index is higher than that of all of your other elements?

I tried looking for this metric in Firebug but couldn't find it.

like image 625
Charlie Kotter Avatar asked Jul 13 '09 08:07

Charlie Kotter


People also ask

What does a higher z index mean?

What is z-index? # The z-index property determines the stack level of an HTML element. The “stack level” refers to the element's position on the Z axis (as opposed to the X axis or Y axis). A higher value means the element will be closer to the top of the stacking order.

What is the Z index function and how does it work?

Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).

How do you solve Z Index problems?

To sum up, most issues with z-index can be solved by following these two guidelines: Check that the elements have their position set and z-index numbers in the correct order. Make sure that you don't have parent elements limiting the z-index level of their children.


1 Answers

Stealing some code from abcoder site for the sake of clarity:

  var maxZ = Math.max.apply(null,      $.map($('body *'), function(e,n) {       if ($(e).css('position') != 'static')         return parseInt($(e).css('z-index')) || 1;   })); 
like image 193
Jimmy Chandra Avatar answered Sep 22 '22 03:09

Jimmy Chandra