Как вы можете определить самый высокий z-индекс в вашем документе?

Question

Чтобы установить div, содержащий прозрачное текстовое изображение, как самый высокий z-индекс в моем документе, я выбрал число 10000, и это решило мою проблему.

Раньше я угадывал с номером 3, но это не имело никакого эффекта.

Итак, есть ли более научный способ выяснить, какой z-индекс выше, чем у всех ваших других элементов?

Я пытался найти этот показатель в Firebug, но не смог его найти.

Answer 1

Решение, вдохновленное великолепной идеей @ Rajkeshwar Prasad .

	/**
	returns highest z-index
	@param {HTMLElement} [target] highest z-index applyed to target if it is an HTMLElement.
	@return {number} the highest z-index.
	*/
	var maxZIndex=function(target) {
	    if(target instanceof HTMLElement){
	        return (target.style.zIndex=maxZIndex()+1);
	    }else{
	        var zi,tmp=Array.from(document.querySelectorAll('body *'))
	            .map(a => parseFloat(window.getComputedStyle(a).zIndex));
	        zi=tmp.length;
	        tmp=tmp.filter(a => !isNaN(a));
	        return tmp.length?Math.max(tmp.sort((a,b) => a-b).pop(),zi):zi;
	    }
	};

#layer_1,#layer_2,#layer_3{
  position:absolute;
  border:solid 1px #000;
  width:100px;
  height:100px;
}
#layer_1{
  left:10px;
  top:10px;
  background-color:#f00;
}
#layer_2{
  left:60px;
  top:20px;
  background-color:#0f0;
  z-index:150;
}
#layer_3{
  left:20px;
  top:60px;
  background-color:#00f;
}

<div id="layer_1" onclick="maxZIndex(this)">layer_1</div>
<div id="layer_2" onclick="maxZIndex(this)">layer_2</div>
<div id="layer_3" onclick="maxZIndex(this)">layer_3</div>

Answer 2

Рассмотрим этот код, который вы можете использовать в качестве библиотеки: getMaxZIndex

Answer 3

Использование 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;
}