What is default z-Index of <div> element in HTML, and how to get it using JavaScript?

javascript css z-index
Johnydep picture Johnydep · Oct 27, 2011 · Viewed 34.1k times · Source

So normally we can get z-Index value of a div element using, e.g: 

var zindex = document.getElementById('id').style.zIndex;

I am using this value in my code to do something. Now the problem is with default values where there is nothing defined in HTML code (or even in cases where z-Index is defined in external css), the same java script command returns nothing.

I understand that in default case, normally the browser decides the rendering based upon element stack. But is there any specific value or way to realize this in JavaScript that there is no value defined??

I mean, normally nothing returned would mean there is no value defined. But it also happend with external css, so how can i distinguish the both??

Answer

Konstantin Smolyanin picture Konstantin Smolyanin · Sep 23, 2013

Default z-index of any element is 'auto' with exception of <html> which has default z-index:0. 'Auto' means that element gets z-index from its parent.

You can see this by using Developer Tools (in Chrome) or any similar tool in other browser. Also you can get this in your code by window.getComputedStyle() as others proposed here.

Related questions

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, …

Read More
CSS3 Transitions - How to delay reset of the z-index property?

Basically, a "highlight" class is added to elements with class "edge" dynamically through javascript on mouseenter. The highlight class is removed on mouseleave. I want to transition the border-color of these elements. However, this "highlight" class also modifies the stack …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More