Maximalen z-Index aus DOM ermitteln?

[MrX]

Hallo,

ich möchte eine Funktion Schreiben, die ein Tooltip anzeigt.
Nun soll die Funktion auch öffentlich für Webeiten-Entwickler zugänglich sein, die keine JavaScript Erfahrung haben.

Das Problem ist nun, das Tooltip soll IMMER als oberstes Element auf der Webseite erscheinen und nicht überdeckt werden.
Wenn man sich mit CSS und Javascript auskennt, kann man den z-Index des Tooltips höher setzen als den maximalesn z-Index der Seite.
Aber wenn jemand unerfahren ist, kennt er nicht den höchsten z-Index der Seite, zumal wenn der Javascript Code evtl. extern eingebettet wurde.

Nun meine Frage, kann man den höchsten z-Index Wert über den DOM Tree ermitteln?
Habe gehöhrt, dass es nur geht, wenn das jeweilige Element im DOM Tree auch ein eigenes style="z-Index" Attribut hat.
Was aber wenn z-Index über CSS Styles zugewiesen wurden?

Gibt es eine Möglichkeit, wirklich den maximaen z-Index zu ermitteln unabhängig ob in CSS StyleSheets definiert oder im Attribut des jeweiligen Tags?

Danke für Hilfe

Gruß MrX

[molily]

Hallo,

Nun meine Frage, kann man den höchsten z-Index Wert über den DOM Tree ermitteln?

Du kannst über getComputedStyle bzw. currentStyle im IE den tatsächlichen zIndex aller Elemente im Dokument auslesen. Fertige Funktionen dazu findest du im Forumsarchiv, z.B. die Funktion getStyle.

Ich frage mich allerdings, ob es das wert ist. Es kostet enorm viel Performance, alle Elemente im Dokument zu untersuchen. Ich würde da einfach einen hohen z-index vorgeben und in die Anleitung schreiben, dass man den doch ggf. anpassen soll.

Mathias

[Sven Rautenberg]

Moin!

Ich frage mich allerdings, ob es das wert ist. Es kostet enorm viel Performance, alle Elemente im Dokument zu untersuchen. Ich würde da einfach einen hohen z-index vorgeben und in die Anleitung schreiben, dass man den doch ggf. anpassen soll.

Der z-index ist darüber hinaus keine globale Angelegenheit. Ein z-index von 1000 eines positionierten Elements liegt trotzdem UNTER dem z-index von 2 eines anderen Elements, wenn sich sich das 1000er-Element seinerseits in einem Element mit z-index 1 befindet.

Es würde also darauf hinauslaufen, alle positionierten Elemente herauszufinden, deren Verschachtelung zu checken, die relevanten z-indices der Elemente und Elternelemente zu prüfen (auch die impliziten Angaben durch schlichtes Aufeinandefolgen im Quelltext), und dann eine passende Angabe für den Tooltip zu generieren.

- Sven Rautenberg

[MrX]

Danke erstmal für Eure Hilfe,

das Veraschachteln stellt doch kein Problem dar.
Ich finde ja den größten zIndex Wert (in deinem Beispiel 1000).
Es ist doch nun egal ob der in einem DIV mit zIndex 2 verschachtelt ist.
Wenn ich nun als z-Index 1001 (also 1000 + 1) wähle, liege ich ja in jedem Fall auch über dem äußeren DIV mit zIndex 2!

Also das Verschachteln wäre kein Problem!

Gibt es evtl. eine elegantere Methode statt den gantzen DOM Tree zu durchlaufen, das Tooltip unabhängig vom zIndex immer on top zu positionieren?

Danke für weitere Diskussionen!

[EKKi]

Mahlzeit,

das Veraschachteln stellt doch kein Problem dar.

Doch.

Ich finde ja den größten zIndex Wert (in deinem Beispiel 1000).

Das bringt Dir aber nichts.

Es ist doch nun egal ob der in einem DIV mit zIndex 2 verschachtelt ist.

Eben nicht.

Wenn ich nun als z-Index 1001 (also 1000 + 1) wähle, liege ich ja in jedem Fall auch über dem äußeren DIV mit zIndex 2!

Nein. Du hast das Prinzip von z-index nicht verstanden. Der z-index bezieht sich immer nur auf alle Elemente der gleichen oder einer "untergeordneten" Ebene.

Ich versuche mal Svens Beispiel deutlicher zu machen:

<style type="text/css">  
[code lang=css]div {  
 width: 100px;  
 height: 100px;  
}

</style>
[...]
<div>
  <div style="position: absolute; z-index: 2; background-color: red;"></div>
  <div style="position: absolute; z-index: 1; top: 20px; left: 50px; background-color: green;">
    <div style="position: relative; z-index: 1000; top: 50px; left: 20px; background-color: blue;"></div>
    <div style="position: absolute; z-index: 500; top: 20px; left: -20px; background-color: yellow;"></div>
  </div>
</div>[/code]

Das <div> mit dem z-index 1000 liegt natürlich ÜBER dem <div> mit dem z-index 500, auch wenn es VOR diesem definiert wurde. Allerdings liegt es auch UNTER dem "Onkel"-<div> mit z-index 2, weil sein eigenes "Eltern"-<div> nur einen z-index von 1 hat.

Also das Verschachteln wäre kein Problem!

Wäre es gerade doch!

MfG,
EKKi

[JürgenB]

Hallo EKKi,

Also das Verschachteln wäre kein Problem!

Wäre es gerade doch!

nein, ein z-Index von 1001 würde in deinem Beispiel alles überdecken. Es würde in deinem Beispiel sogar ein Kind des äußeren Divs mit z-Index 3 alles überdecken.

Wegen der Verschachtelung würde es daher sogar reichen, nur die Kinder des Body auf ihren z-Index zu überprüfen.

Gruß, Jürgen

[EKKi]

Mahlzeit,

nein, ein z-Index von 1001 würde in deinem Beispiel alles überdecken.

Das kommt ganz darauf an, WO GENAU sich das Element, das den z-index 1001 bekommen soll, befindet.

Es würde in deinem Beispiel sogar ein Kind des äußeren Divs mit z-Index 3 alles überdecken.

Sicher. Aber MrX schrieb doch "Wenn ich nun als z-Index 1001 (also 1000 + 1) wähle, liege ich ja in jedem Fall auch über dem äußeren DIV mit zIndex 2!" ... und das stimmt so einfach eben nicht. Nicht, wenn sich das Element, dem er einen z-index von 1001 verpassen will, IRGENDWO "weiter unten" im Dokument-Baum befindet.

Wegen der Verschachtelung würde es daher sogar reichen, nur die Kinder des Body auf ihren z-Index zu überprüfen.

Nur wenn sich das Element, dem ich einen z-index verpassen und das ich "über allen anderen" darstellen will, auch auf "höchster Ebene" befindet.

MfG,
EKKi

[Jonathan]

Hallo EKKi,

Das kommt ganz darauf an, WO GENAU sich das Element, das den z-index 1001 bekommen soll, befindet.

Genau, aber da der Fragesteller das Element ja selbst erstellen kann wäre es klug, Das Element einfach ein direktes Kind vom body sein zu lassen. Dann reicht es nämlich wirklich, einfach den höchsten z-index zu wählen (von überlagernden <object>en und veralteten Browsern mal abgesehen)

Jonathan

[EKKi]

Mahlzeit,

Genau, aber da der Fragesteller das Element ja selbst erstellen kann

Hm ... der Fragesteller schrieb "ich möchte eine Funktion Schreiben, die ein Tooltip anzeigt.". Das bedeutet für mich nicht unbedingt, dass er genau EIN Element dem DOM-Baum hinzufügen will. Das könnte auch heißen, dass diese Funktion bestehende Elemente irgendwie erweitern soll o.ä.

wäre es klug, Das Element einfach ein direktes Kind vom body sein zu lassen. Dann reicht es nämlich wirklich, einfach den höchsten z-index zu wählen (von überlagernden <object>en und veralteten Browsern mal abgesehen)

Würde das reichen? Würde das Element dann auch über anderen Elementen liegen, deren Positionierung nicht von "static" abweicht bzw. bei denen keine Positionierung und kein z-index angegeben wurde oder bei denen es sich gar um Blockelemente handelt?

Ich bastele zur Zeit grad selbst an dieser Problematik und stoße leider allzu häufig auf Ungereimtheiten (in den verschiedensten Browsern).

MfG,
EKKi

[MrX]

Hallo,

ersteinmal vielen Dank für die zahlreichen Antworten.
Es ist, wie schon erwähnt wurde so, dass ich exakt ein Tooltip erstellen möchte, also nicht mehrere. Dieses Tooltip soll an der Position des Mauszeigers erscheinen, wie halt üblich für ein Tooltip.
Dieses Tooltip soll immer als oberstes Element erscheinen und nicht verdeckt werden. Auch üblich für ein Tooltip.
Und ich kann, wie hier als Idee vorgeschlagen natürlich das Tooltip als direktes Kind-Elemnt des BODY-Tags erstellen. So daß es OK wäre, den maximalen zIndex irgendeines (wenn auch verschachtelten) Elements zu finden und den zIndex für mein Tooltip dann um eins zu erhöhen.

Meine Frage nun, muß ich alle Tags nach dem maximalen zIndex durchgehen, also auch <a href...>, <h1>, <table> etc.? Oder kann ich es auf bestimmte Elemente beschränken?

Und immernoch meine Frage, gibt es eine elegantere Lösung, vielleicht ohne zIndex, ein Element zu erstellen, das IMMER on top liegt?

Danke für weitere Diskussionen!

[molily]

Hallo,

Meine Frage nun, muß ich alle Tags nach dem maximalen zIndex durchgehen, also auch <a href...>, <h1>, <table> etc.?

Ja, müsstest du, wenn du so vorgehen willst. Es kann ja irgendwo ganz tief im DOM ein Element mit position:absolute und einem bestimmten z-index stecken, das über deinem Element liegen könnte. Wenn du den höchsten z-index bestimmten willst, müsstest du das finden. Du könntest, wie gesagt, absolut bzw. relativ positionierte Elemente in absolut bzw. relativ positionierten Elementen übergehen. Aber auf diese Weise das DOM zu traversieren wäre nicht unbedingt performanter. Aber nochmal: Ich würde so eine Vorgehensweise nicht empfehlen, weil du da nicht mehr als document.getElementsByTagName("*") durchlaufen könntest. Es sei denn, du bastelst dir ganz krasse XPath-Abfragen oder eine DOM-Traversal-Logik. Das wäre jedoch noch schlimmerer Overkill und ohnehin nicht browserübergreifend.

Und immernoch meine Frage, gibt es eine elegantere Lösung, vielleicht ohne zIndex, ein Element zu erstellen, das IMMER on top liegt?

Nein.

Mathias

[MrX]

Danke für Eure Antworten,

wie sieht es mit Elementen aus, die kein eigenes style-Attribute haben sondern über CSS-StyleSheets mit einem zIndex versehen wurden?

Kann ich den zIndex des betroffenen Elemetes trotzdem irgenwie bestimmen oder muß ich jede CSS Datei einlesen und dort auch noch nach zIndex suchen?

Danke für weitere Hilfe!

[Jonathan]

Hallo MrX,

Kann ich den zIndex des betroffenen Elemetes trotzdem irgenwie bestimmen oder muß ich jede CSS Datei einlesen und dort auch noch nach zIndex suchen?

Kannst du. Stichwort GetComputedStyle. Ist etwas komplizierter, deswegen kein vollständiges Beispiel. Aber unter dem Stichwort solltest du genügend Anleitungen finden.

Jonathan

[Struppi]

Kann ich den zIndex des betroffenen Elemetes trotzdem irgenwie bestimmen oder muß ich jede CSS Datei einlesen und dort auch noch nach zIndex suchen?

Exakt die Frage hat die erste Antwort hier beantwortet, Bitte lies sie noch mal und folge dem Link!

Struppi.

[Jonathan]

Hallo Struppi,

Exakt die Frage hat die erste Antwort hier beantwortet, Bitte lies sie noch mal und folge dem Link!

Auweia. Wieso fragt MrX dann nochmal wenn die Antwort bereits gegeben wurde?

Ich hatte zugegebenermaßen nicht mehr den ganzen Artikel im Überblick.

Jonathan

[Struppi]

Ich hatte zugegebenermaßen nicht mehr den ganzen Artikel im Überblick.

Ich auch ;-)
daher meine Antwort an dich und nicht an MrX.

Struppi.

[MrX]

Danke an alle,

(ja hätte genmuer lesen müssen, sorry!)

[Auge]

Hallo

Das kommt ganz darauf an, WO GENAU sich das Element, das den z-index 1001 bekommen soll, befindet.

Genau, aber da der Fragesteller das Element ja selbst erstellen kann wäre es klug, Das Element einfach ein direktes Kind vom body sein zu lassen. ...

Lesen wir nochmal:

Nun soll die Funktion auch öffentlich für Webeiten-Entwickler zugänglich sein, die keine JavaScript Erfahrung haben. ... Wenn man sich mit CSS und Javascript auskennt, kann man den z-Index des Tooltips höher setzen als den maximalesn z-Index der Seite. Aber wenn jemand unerfahren ist, kennt er nicht den höchsten z-Index der Seite, zumal wenn der Javascript Code evtl. extern eingebettet wurde.

Es soll also universell und von jedermann (auch ohne Erfahrung) einsetzbar sein. Genau jetzt reicht das Durchlaufen vermuteter Strukturen nicht mehr, da nicht sicherzustellen ist, ob die Struktur so vorliegt, wie es vermutet wird.

Ob es sich vom Aufwand her lohnt, den Baum durchzugehen und bei jedem Element zu schauen, ob und wenn ja welchen z-index es hat, kann ich nicht einschätzen. Perfekt wäre es, da es keinen Pflegeaufwand durch den Benutzer des Skripts erzeugt. Praktisch sollte (wie von molily vorgeschlagen) ein hoch gewählter z-index mit einer Anleitung zum Ändern desselben reichen. Für Unerfahrene bedürfte es noch der Beschreibung zum Auffinden der gesetzten z-indexe oder der ausdrücklichen Ermunterung zum Experimentieren mit dem Wert, der vom Skript gesetzt werden soll.

Tschö, Auge