So berechnen Sie den effektiven Z-Index eines HTML-Elements

Ich möchte den Z-Index eines Elements auf einer HTML-Seite aus Code ermitteln. Ich benutze jQuery.So berechnen Sie den effektiven Z-Index eines HTML-Elements

jQuery ermöglicht mir, den angewandten Z-Index mit $ (Element) .css ("Z-Index") zu überprüfen. Wenn der z-index nicht direkt auf dieses Element gesetzt wird, gibt Firefox "auto" zurück und IE gibt "0" zurück. Der effektive Z-Index dieses Knotens hängt dann vom Z-Index seines Containers ab.

Ich dachte, ich könnte den effektiven Z-Index dann berechnen, indem ich auf den Knoten und seine Eltern schaue, bis ein Z-Index-Wert gefunden wird. Das Problem ist, zumindest auf IE, ich kann nicht ein Element mit einem Z-Index von 0 von einem Element, das den Z-Index seines Elternteils erben, disambiguieren, wie in beiden Fällen. CSS ("Z-Index") gibt 0 zurück Irgendwelche Gedanken darüber, wie man den tatsächlichen Z-Index eines Elements berechnet?

Wenn Sie experimentieren möchten, können Sie diesen Code verwenden. Auf IE wird es "0", "0", "0", "300" ausgeben. In Firefox wird "auto", "auto", "0", "300" ausgegeben.

<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>

Quelle

2010-01-07 Frank Schwieterman

Dies wird auf einigen Seiten schwierig sein, da Sie mehrere Stapelindizes haben können. Versuchen Sie, das herauszufinden, so dass Sie etwas auf etwas anderes stapeln können? – scunliffe

So etwas (das Zeug, das gestapelt wird, hinter einem z-Index-Limit zu verstecken) –

auf IE, ich mit einem Z-Index von 0 aus einem Element ein Element nicht eindeutig machen kann, die den Z-Index des übergeordneten für Elemente

Sie suchen wird erben, habe einen effektiven Z-Index. Der Z-Index ist nur für Elemente mit einem position-Stil gültig, die nicht static sind. Also sollten Sie die Eltern nachschlagen, bis Sie ein positioniertes Element mit z-index nicht auto finden.

(Dies gibt Ihnen die innerste z-index. Kontexte Stacking verschachtelt werden können, so dass Sie könnte stattdessen an der äußersten z-Index aussehen wollen, indem man die am weitesten Vorfahren suchen positioniert werden.)

On IE6-7, ein Element ohne eine z-index erhält fälschlicherweise eine automatische z-index von 0. So wird dies tatsächlich geben Sie eine 0 lesen, wenn Sie auf das positionierte Element ohne eine z-index in IE6-7 schauen ... dies mag falsch sein, aber es spiegelt IE bereits falsche Rendering, die Sie sowieso vermeiden oder umgehen müssen .

(In IE8 dies schließlich fixiert ist, und Sie werden in der Tat auto für die erste Benachrichtigung erhalten, eine geeignete Doctype/EmulateIE Einstellung vorausgesetzt, es ist in IE8 einheitlichen Modus zu senden.)

Quelle

2010-01-07 22:44:55 bobince

Gut, dass der Z-Index nur für positionierte Elemente berücksichtigt werden sollte (und alle Traversierungen zur Bestimmung eines Elements z-index sollten nicht positionierte Elemente). –

IE wird einen Z-Index von 0 in Fällen zurückgeben, in denen der Z-Index vererbt wird. IE wird jedoch den geerbten Z-Index korrekt anwenden, so dass das IE6-IE7-Szenario immer noch ein Problem darstellt. –

Der Fehler ist, dass IE6-7 * einen Stapelkontext für ein positioniertes Element nicht "erben" kann. Wenn Sie "0" als "Z-Index" für ein positioniertes Element erhalten, können Sie sicher sein, dass 0 der Z-Index ist, den IE tatsächlich zum Rendern des Elements verwendet - auch wenn es nicht der CSS-Spezifikation entsprechen sollte. – bobince

ich das Problem sehen, aber ich m nicht sicher, ob es wirklich darauf ankommt ... weil Null die z-Index der Seite root ist 0. In dem folgenden Code:

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 meldet 10 und (nicht 'auto'). IE gibt 10 und 0 an. Wenn Sie eine 0 sehen, bewegen Sie sich nach IE. Wenn Sie für FF ein Leerzeichen sehen, bewegen Sie sich um eine Ebene nach oben. Und dann, in jedem Fall, wenn du an die Wurzel kommst und der Wert 'auto' ist (in FFs Zustand), dann könnte ich annehmen, dass es 0 ist. (Vielleicht ist das keine große Annahme!))

Quelle

2010-01-07 22:46:04

"Für IE, wenn Sie eine 0 sehen, dann eine Ebene höher." Diese Anweisung setzt voraus, dass der Z-Index des Elements nicht explizit auf 0 gesetzt wurde. Ich denke, das ist unwahrscheinlich, aber ich habe diesen Ansatz aus diesem Grund schon einmal ausgeschlossen. Vielleicht ist es möglich, dass es sich bei dem Inhalt, den ich mir ansehe, um Anzeigeninhalte handelt, bei denen einige der Anzeigenanbieter möglicherweise seltsame Dinge tun, wenn sie mehr Sichtbarkeit erlangen können. –

Ja, ich verstehe deinen Punkt ... aber ich würde fragen ... unterscheidet IE selbst? Das heißt, verwendet 0 als Marker "nicht gesetzt"? Wenn dies der Fall ist, ist die Einstellung von 0 nicht anders als die Einstellung überhaupt nicht. Ich denke, Sie müssen ein paar tatsächliche Rendering-Tests ausführen, um wirklich sicher zu wissen. –

Ich denke, diese Funktion Ihr Problem in den meisten Fällen

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; 
}

Quelle

2014-09-15 13:39:43

optimierte Version MC_delta_T Antwort lösen:

Dies wird nicht mit verschachteltem z-Indizes arbeiten, aber es wird die höchste finden Wert in der Hierarchie, der die meiste Zeit arbeiten sollte:

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; 
}

Quelle

2014-12-09 09:39:03 phreakhead

So berechnen Sie den effektiven Z-Index eines HTML-Elements

Antwort

Verwandte Themen