✔ Vererbung des z-index

[Tomatenmark]

Hallo Leute

Ich bastel grad an einer neuen Seite und darin hab ich einen Layer, welches per CSS auf z-index:30 liegt, und der ein Formular enthält.

In diesem Layer hab ich mit Hilfe von Javascript eine "select" Box gebastelt, die schöner aussieht und Bilder als Optionen enthalten kann, wobei ich hier wiederrum mit einem kleinen "Layer" (welches auf Klick die Auswahlmöglichkeiten anzeigt) realisiert ist.
Dieser Optionslayer wird mit Hilfe von Javascript nach Klick auf den zIndex:32 gesetzt.

Um den Optionslayer bei einem Klick ausserhalb des Optionslayers zu schließen (also bei einem Klick irgendwo auf der Seite) öffne ich einen weiteren transparenten Layer, der die ganze Seite abdeckt, und auf dem mit Javascript ein Eventlistener liegt, der den Layer bei Klick schließt.
Gesetzt habe ich diesen mit dem z-index:31 (also nach dem Hauptlayer und vor dem Optionslayer).

Nur leider scheint der Optionslayer den vererbten Wert des Hauptlayers zu übernehmen und ist damit auf z-index:30.

Wie kann ich diese Vererbung lösen bzw. woran könnte es denn sonst liegen ?

Gebe ich dem Schließenlayer, der die gesamte abdeckt, den z-index:29, dann liegt der Hauptlayer und der Optionslayer davor, aber bei einem Klick auf den Hauptlayer schließt sich natürlich nichts, weil dort der Schließenlayer nicht aktiv ist.

Vielen dank für eure Hilfe

 

[Maik]

Hi!

Nur leider scheint der Optionslayer den vererbten Wert des Hauptlayers zu übernehmen und ist damit auf z-index:30.

Kann es sein, dass der Optionslayer im Hauptlayer eingebettet ist?

Das erklärt, weshalb er keine höhere Schichtposition wie die übrigen Layer besitzt / annimmt, und daran lässt sich dann in dieser Konstellation auch nichts ändern.

mfg Maik

 

[Tomatenmark]

Hallo ja, er befindet sich im Hauptlayer.
Aber anders geht es ja leider nicht oder ?
Ich mein klar könnt ich ihn ausserhalb angeben und absolut rein "positionieren", aber er muss ja drauf liegen. Oder gibt es eine andere Möglichkeit das zu ermöglichen ? Bzw. hast du eine Alternative für diesen "Klick ausserhalb des Optionslayers, dann schließe den Optionslayer" Funktion ?

 

[Maik]

Du wirst die Layer schon getrennt voneinander im Markup notieren müssen, um ihnen unterschiedliche z-index-Werte zuordnen zu können.

mfg Maik

 

[Sven Mintel]

Moin,

eine vielleicht einfachere Lösung, die dir den "Schließenlayer" und somit das Problem erspart:
Überwache den onclick-Event generell für das Dokument. Tritt er ein, ermittle, in welchem Element er ausgelöst wurde. War es nicht der "Optionslayer" bzw. eines seiner Kindelemente...schliesse den "Optionslayer".

 

[Tomatenmark]

Danke euch Beiden für die Antworten.

Der Tipp von Sven Mintel hört sich gut an.
Ich hab jetzt gegoogelt und auf selfhtml gesehen, aber finde keine eigenschaft des event objects, welches das angeklickte objekt widergibt.
Oder wie kann ich das ermitteln ? Mittels Mauszeigerposition ?

PS: Könnte jemand den thread vielleicht ins Javascript forum tun, ich denk da passt es jetzt besser rein

 

[Sven Mintel]

Diese Eigenschaften gibt es. Sie heissen srcElement(im InternetExplorer) bzw. target(in allen anderen Browsern)...jeweils Attribute des Event-Objektes.

 

[Tomatenmark]

Vielen dank für die Antwort.
Gerade bevor ich reinschaun wollte hab ich es gefunden.
Nun tritt aber ein weiteres Problem auf

Wenn ich nun einen Eventhandler auf das document-Objekt setze, damit er alle Klicks beobachtet und in der aufzurufenden Funktion (also wenn das Ereignis eintritt) checken lasse, ob der Click ausserhalb des Optionslayers getätigt wurde, dann zeigt er mir den Optionslayer gar nicht mehr an, da er anscheinend den ersten Click, der gemacht wird um den Optionslayer zu öffnen (und der auch den Eventhandler auf das document-Objekt setzt) mitzählt und da gleich kontrolliert.

Wie kann ich das umgehen also, dass er diesen Click mitzählt und erst dann anfängt, wenn diese Funktion bereits ausgeführt wurde ?


Ich hoffe es ist einigermaßen verständlich

 

[Sven Mintel]

du könntest prüfen, ob der Optionslayer überhaupt angezeigt wird...wenn ja, versteckst du ihn, wenn nicht, öffnest du ihn, sofern der Klick in dem Element erfolgte, das dafür vorgesehen ist.

 

[Tomatenmark]

Das hab ich bereits versucht.
Aber es scheint so, dass egal wie ich die Befehle reihe (zuerst setzen des eventhandlers, dann den layer anzeigen) jedesmal, wenn er die onlick-funktion ausführt, dann ist der layer bereits auf angezeigtem modus.

Natürlich könnte ich das auch so machen, dass eine Variable beim ersten mal auf true gesetzt wird und danach immer kontrolliert wird, aber ob das die optimale Lösung ist ?


Eigenartig. Kann man nicht irgendwie das erste Click Event aussetzen oder mit irgendeinem Handler Attribut einstellen, dass beim definieren des Objektes das Event nicht gezählt wird ?