La siguiente afirmación:
Pero el problema es que al ser un número fijo no me asegura que sea el
mas grande ya que alguien en alguna libreria de terceros puede haber
pensado un número mayor supongamos 10001 por lo que si ambos
componentes se muestran juntos el que cree se mostrara debajo.
Y la siguiente duda:
La duda es si existe alguna manera de saber de todos los elementos del
DOM cual es el valor maximo del atributo z-index.
No son del todo compatibles. No es necesario encontrar el máximo z-index
de todo el documento, ya que z-index
define un contexto de apilamiento (del ingles stacking context)
Dos elementos pertenecientes a distintos contextos de apilamiento no se pueden comparar mediante sus z-index
Considera el siguiente ejemplo, sacado de la red de MDN:

En el, se puede apreciar que a pesar de que el DIV #4
tiene un z-index: 6
, no se dibuja sobre el DIV #1
con z-index: 5
Luego, solo te interesan los nodos hijos directos a partir del nodo sobre el que quieres dibujar tu contenido.
Un codigo que te serviría para ello, es el siguiente:
function maximoZindex(from){
var max = 0;
from.find(">*").each(function(i, e){
var z = Number($(e).css("z-index"));
if(z > max) {
max = z;
}
});
return max;
}
console.log("maximo z-index a partir de body", maximoZindex($("body")));
Puedes probarlo en el siguiente snippet:
function maximoZindex(from){
var max = 0;
from.find(">*").each(function(i, e){
var z = Number($(e).css("z-index"));
if(z > max) {
max = z;
}
});
return max;
}
console.log("maximo z-index a partir de body", maximoZindex($("body")));
* {
margin: 0;
}
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
opacity: 0.7;
position: relative;
}
h1 {
font: inherit;
font-weight: bold;
}
#div1,
#div2 {
border: 1px dashed #696;
padding: 10px;
background-color: #cfc;
}
#div1 {
z-index: 5;
margin-bottom: 190px;
}
#div2 {
z-index: 2;
}
#div3 {
z-index: 4;
opacity: 1;
position: absolute;
top: 40px;
left: 180px;
width: 330px;
border: 1px dashed #900;
background-color: #fdd;
padding: 40px 20px 20px;
}
#div4,
#div5 {
border: 1px dashed #996;
background-color: #ffc;
}
#div4 {
z-index: 6;
margin-bottom: 15px;
padding: 25px 10px 5px;
}
#div5 {
z-index: 1;
margin-top: 15px;
padding: 5px 10px;
}
#div6 {
z-index: 3;
position: absolute;
top: 20px;
left: 180px;
width: 150px;
height: 125px;
border: 1px dashed #009;
padding-top: 125px;
background-color: #ddf;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context -->
<div id="div1">
<h1>Division Element #1</h1>
<code>position: relative;<br/>
z-index: 5;</code>
</div>
<div id="div2">
<h1>Division Element #2</h1>
<code>position: relative;<br/>
z-index: 2;</code>
</div>
<div id="div3">
<div id="div4">
<h1>Division Element #4</h1>
<code>position: relative;<br/>
z-index: 6;</code>
</div>
<h1>Division Element #3</h1>
<code>position: absolute;<br/>
z-index: 4;</code>
<div id="div5">
<h1>Division Element #5</h1>
<code>position: relative;<br/>
z-index: 1;</code>
</div>
<div id="div6">
<h1>Division Element #6</h1>
<code>position: absolute;<br/>
z-index: 3;</code>
</div>
</div>