HTML 中 <div> 元素的默认 z-Index 是什么，以及如何使用 JavaScript 获取它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7911311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is default z-Index of <div> element in HTML, and how to get it using JavaScript?
提问by Johnydep
So normally we can get z-Index value of a div element using, e.g:
所以通常我们可以使用例如获取 div 元素的 z-Index 值：
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.
我在我的代码中使用这个值来做一些事情。现在的问题是在 HTML 代码中没有定义任何内容的默认值（或者甚至在 z-Index 在外部 css 中定义的情况下），相同的 java 脚本命令不返回任何内容。
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??
我知道在默认情况下，浏览器通常会根据元素堆栈来决定渲染。但是在 JavaScript 中是否有任何特定的价值或方法可以实现没有定义的价值？
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??
我的意思是，通常没有任何返回意味着没有定义值。但它也发生在外部 css 上，所以我如何区分两者？
采纳答案by Gringo Suave
You might try window.getComputedStyle() on the element:
您可以在元素上尝试 window.getComputedStyle() ：
https://developer.mozilla.org/en/DOM/window.getComputedStyle
https://developer.mozilla.org/en/DOM/window.getComputedStyle
var e = document.getElementById('mydiv');
var value = window.getComputedStyle(e[0], null)['zIndex']
I got these values: "auto", "10". After changing: z-index: 10, position: relative.
我得到了这些值：“自动”、“10”。更改后：z-index：10，位置：相对。
回答by Konstantin Smolyanin
Defaultz-indexof any element is 'auto'with exception of <html>which has default z-index:0. 'Auto'means that element gets z-index from its parent.
默认z-index的任何元件的是'auto'用的例外<HTML>具有默认z-index:0。'Auto'表示元素从其父元素获取 z-index 。
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.
您可以通过使用开发者工具（在 Chrome 中）或其他浏览器中的任何类似工具来查看这一点。你也可以通过window.getComputedStyle()在你的代码中得到这个，就像其他人在这里提出的那样。
回答by Kelly Elton
I believe everything is z-indexed as 0. Really z-index is only valid if you set it for all the elements you care about. You can set the z-index of one div to 100000, but it won't matter if you don't set the z-index of the other element you are trying to overlap.
我相信所有东西都是 z-indexed 为 0。真正的 z-index 只有当你为你关心的所有元素设置它时才有效。您可以将一个 div 的 z-index 设置为 100000，但如果您不设置要重叠的另一个元素的 z-index，则无关紧要。
So I guess what I'm trying to say is that the default z-index of the div doesn't matter, it's only computed if you set it.
所以我想我想说的是 div 的默认 z-index 无关紧要，只有在您设置它时才会计算它。
A div inside of a div doesn't have a specific z-index. Ad div inside of a div inside of the body inside of an iframe, inside of 3 more divs and 1 table, doesn't have a z-index(or a z-index that's computed.).
div 内的 div 没有特定的 z-index。在 iframe 内的 body 内的 div 内的广告 div，在另外 3 个 div 和 1 个表内，没有 z-index（或计算的 z-index。）。
I can't see that there would be any practical reason for trying to find a z-index of an item, if it's irrelevant anyways.
我看不出有任何实际理由试图找到一个项目的 z-index，如果它无论如何都不相关的话。
回答by Neil
@Konstantin-Smolyanin
@康斯坦丁-斯莫利亚宁
Auto' means that element gets z-index from its parent.
Auto' 表示元素从其父元素获取 z-index。
No it doesn't - "inherit" means the element gets its' z-index from its' parent.
不，它没有——“继承”意味着元素从它的父元素获取它的 z-index。
When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).
当未指定 z-index 属性时，元素将在默认渲染层 0（零）上渲染。
回答by Korvin Szanto
Have a look at this question: Getting the z-index of a DIV in JavaScript?:
看看这个问题：Getting the z-index of a DIV in JavaScript? ：
Since z index is mentioned in the CSS part you won't be able to get it directly through the code that you have mentioned. You can use the following example.
由于在 CSS 部分中提到了 z 索引，因此您将无法通过您提到的代码直接获得它。您可以使用以下示例。
function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (window.getComputedStyle)
{
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
}
else if (x.currentStyle)
{
var y = x.currentStyle[styleProp];
}
return y;
}
pass your element id and style attribute to get to the function.
传递您的元素 id 和 style 属性以获取该函数。
Eg:
例如：
var zInd = getStyle ( "normaldiv1" , "zIndex" );
alert ( zInd );
For firefox you have to pass z-index instead of zIndex
对于 Firefox，您必须传递 z-index 而不是 zIndex
var zInd = getStyle ( "normaldiv1" , "z-index" );
alert ( zInd );
You must use z-indexfor Chrome as well.
您也必须z-index用于 Chrome。
回答by orustam
You misunderstand the meaning of elements "style" property. By referring element.style what you actually retrieving is elements inline style. For example:
您误解了元素“样式”属性的含义。通过引用 element.style，您实际检索的是内联样式的元素。例如：
var el = document.getElementById('myEl');
console.log(el.style.zIndex); //you are asking for <div id="myEl" style="z-index: 1;"></div>
and to get the value of your css style(it could be a code goes here tag or any external stylesheet) you have to check is standard method (window.getComputedStyle) supported or not, if not you should check for internet explorer's specific version. You could do so by referring to el.currentStyle.
并获得您的 css 样式的值（它可能是一个代码在这里标记或任何外部样式表），您必须检查是否支持标准方法（window.getComputedStyle），如果不支持，您应该检查 Internet Explorer 的特定版本。您可以通过引用 el.currentStyle 来实现。
Summary:
概括：
to get inline style: var zIndex = el.style.zIndex
to get stylesheet value or style tag value:
standard method: var zIndex = window.getComputedStyle(el,null).getPropertyValue('z-index');
ie method: var zIndex = el.currentStyle['z-index'];
