我想从代码中确定html页面上元素的z-index。我正在使用jQuery。
jQuery允许我使用$（element）.css（“z-index”）检查应用的z-index。如果直接在该元素上没有设置z-index，则Firefox返回“auto”，IE返回“0”。然后，该节点的有效z-index取决于其容器的z-index。
我想我可以通过查看节点及其父节点来计算有效的z-index，直到找到z-index值。问题是，至少在IE上，我不能从一个将继承其父级的z-index的元素中消除z索引为0的元素，就像在两种情况下一样.css（“z-index”）返回0关于如何计算元素的实际z-index的任何想法？
如果您想进行试验，可以使用此代码。在IE上它将输出“0”，“0”，“0”，“300”。在Firefox上，它将输出“auto”，“auto”，“0”，“300”。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
alert($("<div></div>").css("z-index"));
alert($("<div style='position:relative'></div>").css("z-index"));
alert($("<div style='z-index:0'></div>").css("z-index"));
alert($("<div style='z-index:100'></div>").css("z-index"));
</script>
</body>
</html>
在IE上，我不能从一个将继承其父级的z-index的元素中消除z-index为0的元素的歧义
您正在寻找具有有效z-index的元素。 z-index仅对具有除position之外的static样式的元素有效。所以你应该查找父母，直到找到z-index non-auto的定位元素。
（这将为您提供最里面的z-index。堆叠上下文可以嵌套，因此您可能希望通过查看要定位的最远的祖先来查看最外层的z-index。）
在IE6-7上，没有z-index的元素错误地接收了z-index的自动0。所以当你在IE6-7中看到没有0的定位元素时，这确实会给你一个z-index读数......这可能是错的，但它反映了IE已经错误的渲染，你必须避免或无论如何都要解决。
（在IE8中，这最终得到修复，你确实会得到第一个警告的auto，假设一个合适的doctype / EmulateIE设置将其发送到IE8本机模式。）
我看到了问题，但我不确定它真的很重要...因为零是页面的根z-index为0.在下面的代码中：
alert($("<div id='root' style='z-index:10'><div id='blah'></div><div>").get(0).style.zIndex);
alert($("<div id='root' style='z-index:10'><div id='blah'></div><div>").children('#blah').get(0).style.zIndex);
FF报告10和（不是'自动'）。 IE报告10和0.对于IE，如果您看到0，则向上移动一个级别。对于FF，如果看到空白，则向上移动一个级别。然后在任何一种情况下，如果你到达根，并且值是'auto'（在FF的条件下）那么我（猜测）你可以假设它是0.（也许这不是一个很好的假设！）
我认为这个功能可以在大多数情况下解决您的问题
function ustMaxZIndex(eleman) {
var elm = $('#'+eleman);
var zindex = parseInt(elm.css("z-index")) > 0 ? elm.css("z-index") : 0;
while(true) {
zindex = (parseInt(elm.css("z-index")) > 0 && parseInt(elm.css("z-index")) > zindex) ? elm.css("z-index") : zindex;
if(elm.length > 0) {
elm = elm.parent();
} else {
break;
}
}
return zindex;
}
优化版MC_delta_T的答案：
这不适用于嵌套的z索引，但它会在层次结构中找到最高值，这应该在大多数情况下工作：
function getEffectiveZIndex(elm) {
var elementZIndex,
style,
zindex = 0;
while(elm) {
style = getComputedStyle(elm);
if (style) {
elementZIndex = parseInt(style.getPropertyValue('z-index'), 10);
if (elementZIndex > zindex) {
zindex = elementZIndex;
}
}
elm = elm.parentNode;
}
return zindex;
}
这是我的尝试。如果找不到特定的z-index数，该函数返回auto，否则返回一个数字。它包括传递的元素（通过addBack方法调用）。
希望这对某人有帮助：
/**
* __getElementZIndex
*
* @access private
* @param HTMLElement element
* @return String
*/
var __getElementZIndex = function(element) {
var response = 'auto',
zIndex,
items = $(element).parents().addBack().toArray(),
index,
item;
for (index in items) {
item = items[index];
zIndex = $(item).css('z-index');
if (zIndex === 'auto') {
continue;
}
if (zIndex === 'initial') {
continue;
}
if (zIndex === 'inherit') {
continue;
}
if (isNaN(zIndex) === true) {
continue;
}
zIndex = parseInt(zIndex, 10);
if (response === 'auto') {
response = zIndex;
continue;
}
if (zIndex > response) {
response = zIndex;
continue;
}
}
return response;
};
注意：需要使用jQuery