你怎么能找出你的文档中最高的z-index？
为了在我的文档中设置一个包含透明文本图像的div作为最高的z-index，我select了数字10,000，它解决了我的问题。
以前我已经猜到数字3，但没有效果。
那么，有没有一种更科学的方法来确定Z指数是高于其他所有元素的呢？
我试图在Firebug中查找这个指标，但找不到它。
你可以调用findHighestZIndex来获取特定的元素types，比如像这样的“DIV”：
findHighestZIndex('div');
假设一个findHighestZindex函数是这样定义的：
function findHighestZIndex(elem) { var elems = document.getElementsByTagName(elem); var highest = 0; for (var i = 0; i < elems.length; i++) { var zindex=document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index"); if ((zindex > highest) && (zindex != 'auto')) { highest = zindex; } } return highest; }
为了清楚起见，从abcoder网站窃取一些代码：
var maxZ = Math.max.apply(null, $.map($('body *'), function(e,n) { if ($(e).css('position') != 'static') return parseInt($(e).css('z-index')) || 1; }));
在我看来，解决这个问题的最好方法就是为了规定什么样的z-index被用于不同types的元素。 然后，您将通过回顾文档find正确的z-index 。
我想你必须自己做这个…
function findHighestZIndex() { var divs = document.getElementsByTagName('div'); var highest = 0; for (var i = 0; i < divs .length; i++) { var zindex = divs[i].style.zIndex; if (zindex > highest) { highest = zindex; } } return highest; }
没有一个默认的属性或任何东西，但你可以写一些JavaScript来遍历所有元素，并找出它。 或者，如果您使用像jQuery一样的DOMpipe理库，则可以扩展其方法（或者查明它是否已经支持），以便从页面加载开始跟踪元素z-索引，然后检索最高的z-索引变得微不足道，指数。
我相信你所观察的是巫术。 如果不能访问完整的样式表，我当然不能可靠地说出来。 但是我觉得这里真正发生的事情是，你已经忘记了只有定位的元素才受z-index影响。
此外， z-index es不会自动分配，只在样式表中，这意味着没有其他z-index ed元素， z-index:1; 将在其他一切之上。
我想添加我在我的一个UserScript中使用的ECMAScript 6实现。 我使用这个来定义特定元素的z-index，以便它们始终显示最高。 我可以用链接排除这些元素:notselect器。
var highestZIndex=0; // later, potentially repeatedly highestZIndex=Math.max(highestZIndex,...[...document .querySelectorAll('body *:not([data-highest]):not(.yetHigher)') ].map(a=>parseFloat(getComputedStyle(a).zIndex)) .filter(a=>!isNaN(a)));
下面的四行可以运行多次，通过找出当前最高highestZIndex值和所有元素的所有其他计算的Z-索引之间的最大值来重复更新variableshighestZIndex 。 该filter将排除所有"auto"值。
我最近不得不为这个项目做这个工作，而且我发现我从@Philippe Gerber这里得到的很好的答案中受益匪浅 ，而@flo的答案很好（被接受的答案）。
上面提到的答案的主要区别是：
- 计算CSS
z-index和任何内联z-index样式，并使用两者中较大的一个进行比较和计算。 - 值强制为整数，任何string值（
auto，static等）将被忽略。
这里是代码示例CodePen，但也包含在这里。
(() => { /** * Determines is the value is numeric or not. * See: https://stackoverflow.com/a/9716488/1058612. * @param {*} val The value to test for numeric type. * @return {boolean} Whether the value is numeric or not. */ function isNumeric(val) { return !isNaN(parseFloat(val)) && isFinite(val); } /** * Finds the highest index in the current document. * Derived from the following great examples: * [1] https://stackoverflow.com/a/1118216/1058612 * [2] https://stackoverflow.com/a/1118217/1058612 * @return {number} An integer representing the value of the highest z-index. */ function findHighestZIndex() { let queryObject = document.querySelectorAll('*'); let childNodes = Object.keys(queryObject).map(key => queryObject[key]); let highest = 0; childNodes.forEach((node) => { // Get the calculated CSS z-index value. let cssStyles = document.defaultView.getComputedStyle(node); let cssZIndex = cssStyles.getPropertyValue('z-index'); // Get any inline z-index value. let inlineZIndex = node.style.zIndex; // Coerce the values as integers for comparison. cssZIndex = isNumeric(cssZIndex) ? parseInt(cssZIndex, 10) : 0; inlineZIndex = isNumeric(inlineZIndex) ? parseInt(inlineZIndex, 10) : 0; // Take the highest z-index for this element, whether inline or from CSS. let currentZIndex = cssZIndex > inlineZIndex ? cssZIndex : inlineZIndex; if ((currentZIndex > highest)) { highest = currentZIndex; } }); return highest; } console.log('Highest Z', findHighestZIndex()); })();
#root { background-color: #333; } .first-child { background-color: #fff; display: inline-block; height: 100px; width: 100px; } .second-child { background-color: #00ff00; display: block; height: 90%; width: 90%; padding: 0; margin: 5%; } .third-child { background-color: #0000ff; display: block; height: 90%; width: 90%; padding: 0; margin: 5%; } .nested-high-z-index { position: absolute; z-index: 9999; }
<div id="root" style="z-index: 10"> <div class="first-child" style="z-index: 11"> <div class="second-child" style="z-index: 12"></div> </div> <div class="first-child" style="z-index: 13"> <div class="second-child" style="z-index: 14"></div> </div> <div class="first-child" style="z-index: 15"> <div class="second-child" style="z-index: 16"></div> </div> <div class="first-child" style="z-index: 17"> <div class="second-child" style="z-index: 18"> <div class="third-child" style="z-index: 19"> <div class="nested-high-z-index">Hello!!! </div> </div> </div> </div> <div class="first-child"> <div class="second-child"></div> </div> <div class="first-child"> <div class="second-child"></div> </div> <div class="first-child"> <div class="second-child"></div> </div> </div>
使用ES6一个更清洁的方法
function maxZIndex() { return Array.from(document.querySelectorAll('body *')) .map(a => parseFloat(window.getComputedStyle(a).zIndex)) .filter(a => !isNaN(a)) .sort() .pop(); }
使用jQuery：
如果没有提供元素，它将检查所有元素。
function maxZIndex(elems) { var maxIndex = 0; elems = typeof elems !== 'undefined' ? elems : $("*"); $(elems).each(function(){ maxIndex = (parseInt(maxIndex) < parseInt($(this).css('z-index'))) ? parseInt($(this).css('z-index')) : maxIndex; }); return maxIndex; }
考虑一下你可以用作库的代码： getMaxZIndex
