z-index problem

[mxxxxx]

hallo,

um euch mein problem zu veranschaulichen habe ich folgende internetseite gestaltet: klicke hier

bei den bildern handelt es sich um verschiebbare objekte (funktioniert mit einem js hier ), die - sobald man sie angewählt hat - in den vordergrund springen. dies ist auch sehr sinnvoll. allerdings möchte ich das dies nur in bezug auf die bilder geschieht, das textfeld (inhalt inhalt..) soll IMMER im vordergrund bleiben. leider gelingt mir das nicht.

habt ihr eine lösung des problems?

vielen dank!
m

[Antipitch]

Hi,

dem Textelement eine CSS-Positionierung und einen z-index geben?

dies ist auch sehr sinnvoll

Hä, warum? In Bezug worauf? Schwarzer Text auf einem schwarzweißen Fußball ist mit Sicherheit nicht sinnvoll...

cheers
Antipitch

[mxxxxx]

hi!

bitte bedenke - das dies nur eine beispiel datei ist. schwarzer text auf schwarzem ball ist natürlich nicht so sinnvoll, aber wie gesagt - nur ein beispiel.

ich habe der div box, in der der text liegt, bereits eine css positionierung und einen höheren z-index gegeben. leider erscheinen die bilder, nachdem ich sie verschoben habe, trotzdem vor (statt wie gewünscht hinter) dem text.

[Antipitch]

Hi,
ich weiß nicht, ob hier jemand Lust hat, sich ausführlich mit dem Script bzw. seiner API zu beschäftigen. Scheint mir für den Effekt auch völlig überdimensioniert, aber ich nehme mal an, dass es die z-indexe für die Bilder dynamisch hoch zählt.

Deshalb:

ich habe der div box, in der der text liegt, bereits eine css positionierung und einen höheren z-index gegeben.

im Moment sehe ich da
z-index:3.
Mal mit 1000 versucht?

cheers
Antipitch

PS: Ein gutes Script würde nicht nur hoch, sondern auch wieder runter zählen.

[Gernot Back]

Hallo Antipitch,

im Moment sehe ich da
z-index:3.
Mal mit 1000 versucht?

Ich verstehe nie, warum viele mit dem Z-Index immer so maßlos übertreiben. Ich glaube, oft verstehen sie einfach das Konzept des Stapelkontextes nicht und beginnen dann aus schierer Verzweiflung darüber ein sinnloses Wettrüsten in ihrem Code.

PS: Ein gutes Script würde nicht nur hoch, sondern auch wieder runter zählen.

Eben, und da braucht es bei drei Objekten die eine bestimmte Schichtung zueinander haben sollen , maximal den Z-Index "2", wenn man bei Null zu zählen beginnt.

Gruß Gernot

[Antipitch]

Hi Gernot,
völlig deiner Meinung (hoffe, die "1000" verfrachten mich jetzt nicht in diesen

oft verstehen sie einfach das Konzept des Stapelkontextes nicht

Topf ;-)

Da es sich aber offensichtlich nicht um ein in unserem Sinne "gutes" Script handelt, fällt Positionierungs-Salt 2 wohl aus und es bleibt beim

Wettrüsten

Oder den Bereich begrenzen, innnerhalb dessen verschoben werden kann (falls das Script das bietet).

cheers
Antipitch

[Detlef G.]

Hallo Gernot

Ich verstehe nie, warum viele mit dem Z-Index immer so maßlos übertreiben.

Ich auch nicht, außer in dem Fall, dass ein funktionierendes kompliziertes Fremdscript verwendet wird, dass den z-index ohne „Rücksicht auf Verluste” immer weiter hochzählt.

PS: Ein gutes Script würde nicht nur hoch, sondern auch wieder runter zählen.

Eben, und da braucht es bei drei Objekten die eine bestimmte Schichtung zueinander haben sollen , maximal den Z-Index "2", wenn man bei Null zu zählen beginnt.

Nur bastle diese Funktion mal in das bestehende Script ein.
Relativ einfach einzubauen wäre wohl eine dynamische Erhöhung des z-index des festen Containers. Das würde so dem Konzept des Scripts zuwiderlaufen, dürfte aber funktionieren.
Das feste Element bekommt eine Id z.B. id="fest", und im Script wird direkt unter Zeile 844 eingefügt:
if (document.getElementById("fest")) document.getElementById("fest").style.zIndex=dd.z+1;

Auf Wiederlesen
Detlef

[mxxxxx]

danke detlef,

funktioniert nun bislang einwandfrei!

[Detlef G.]

Hallo Antipitch

ich weiß nicht, ob hier jemand Lust hat, sich ausführlich mit dem Script bzw. seiner API zu beschäftigen. Scheint mir für den Effekt auch völlig überdimensioniert, aber ich nehme mal an, dass es die z-indexe für die Bilder dynamisch hoch zählt.

Ohne mich wirklich mit dem Script auseinandergesetzt zu haben - ja es zählt hoch, bei jeden Klick auf eines der verschiebbaren Objekte eins weiter, beginnend mit 51.

im Moment sehe ich da
z-index:3.
Mal mit 1000 versucht?

Dann könnte schon einige Male geklickt und geschoben werden.

PS: Ein gutes Script würde nicht nur hoch, sondern auch wieder runter zählen.

Naja, genau das ist relativ aufwendig, besonders, wenn davon ausgegangen werden muss, dass es auch sehr viele verschiebbare Elemente geben könnte. Es müsste bei jeder z-index-Erhöhung der alte z-index des Elements gespeichert werden, dann die Liste aller Elemente durchlaufen werden, um bei allen, die einen höheren als den alten z-index haben diesen eines zu verringern. Das könnte dann je nach Reihenfolge zu einem wilden umstapeln der Elemente führen. Um dies zu vermeiden müssten die Elemente vorher nach z-index sortiert werden und die z-index-Verringerung bei dem begonnen mit dem kleinsten z-index, der größer als der alte des angeklickten Elements ist, begonnen werden.

Auf Wiederlesen
Detlef

[Gernot Back]

Hallo Detlef,

Naja, genau das ist relativ aufwendig, besonders, wenn davon ausgegangen werden muss, dass es auch sehr viele verschiebbare Elemente geben könnte.

der OP könnte allerdings sogar ganz unaufwendig auch bei seinem nur hochzählenden Skript bleiben, wenn er alle verschiebbaren Elemente in einen seinerseits absolut positionierten Container packen würde, dem er einen geringeren Z-Index geben würde als dem Container mit den Textelementen.

Damit würde er sich den Stapelkontext zunutze machen. Einmal hinter der Textebene abgelegte Elemente könnte er dann allerdings nicht mehr erreichen, weshalb er vielleicht auch noch eine dritte Steuerungsebene benötigt, bei der transparente Schaltflächen wiederum passgenau über den zu steuernden Elementen mitgeführt werden. Das transparente Steuerelement und sein zugeordnetes sichtbares, zu steuerndes Element hätten dann innerhalb ihres jeweiligen Stapelkontextes denselben Z-Index.

Text, hinter dem dann ein Element abgelegt wäre, wäre dann allerdings dennoch nicht klick- oder markierbar, weil er ja von dem wenn auch unsichtbaren Steuerelement überdeckt würde.

Gruß Gernot

[Detlef G.]

Hallo Gernot

der OP könnte allerdings sogar ganz unaufwendig auch bei seinem nur hochzählenden Skript bleiben, wenn er alle verschiebbaren Elemente in einen seinerseits absolut positionierten Container packen würde, dem er einen geringeren Z-Index geben würde als dem Container mit den Textelementen.

Ja, du hast recht, das wäre wohl die einfachste und zuverlässigste Variante.
Ich verwende zu wenig position und z-index, so dass mir diese einfache Möglichkeit nicht einfiel.

Damit würde er sich den Stapelkontext zunutze machen. Einmal hinter der Textebene abgelegte Elemente könnte er dann allerdings nicht mehr erreichen, …

Doch, interessanterweise lassen sich bei diesem Script die verschiebbaren Elemente auch durch drüberliegende Elemente hindurch greifen.

Auf Wiederlesen
Detlef

[Gernot Back]

Hallo Detlef,

Doch, interessanterweise lassen sich bei diesem Script die verschiebbaren Elemente auch durch drüberliegende Elemente hindurch greifen.

kann es sein, dass du das nur im IE beobachtet hast? Vom IE kenne ich es nämlich auch, dass man großflächig zu verlinkende Teaser, die auch Text enthalten, nur mit einem darüber absolut positionierten A-Element verlinken kann, wenn man diesem auch noch ein transparentes Hintergrundbild verpasst, sonst stanzt sich der Text durch die Linkfläche (vollkommen gaga, aber so ist der IE nun mal).

Gruß Gernot

[Detlef G.]

Hallo Gernot

kann es sein, dass du das nur im IE beobachtet hast?

Nein, getestet mit Mozilla ActiveX Control v1.7.12, FF 3.0.13, IE 6 und Opera/9.64, es funktioniert in allen identisch.

Auf Wiederlesen
Detlef

[Gernot Back]

Hallo Detlef,

Nein, getestet mit Mozilla ActiveX Control v1.7.12, FF 3.0.13, IE 6 und Opera/9.64, es funktioniert in allen identisch.

dann hat sich das, was ich zuerst als Bug im IE betrachtete, offenbar mittlerweile als Standard durchgesetzt. Dann kann ich mich wohl in Zukunft darauf einstellen, auch für andere Browser großflächig zu verlinkende Teaser mit Blindpixeln als Hintergrundbildern im absolut darüber positionierten A-Element zu bauen.

Gruß Gernot

[ChrisB]

Hi,

PS: Ein gutes Script würde nicht nur hoch, sondern auch wieder runter zählen.

Naja, genau das ist relativ aufwendig, besonders, wenn davon ausgegangen werden muss, dass es auch sehr viele verschiebbare Elemente geben könnte. Es müsste bei jeder z-index-Erhöhung der alte z-index des Elements gespeichert werden, dann die Liste aller Elemente durchlaufen werden, um bei allen, die einen höheren als den alten z-index haben diesen eines zu verringern. Das könnte dann je nach Reihenfolge zu einem wilden umstapeln der Elemente führen. Um dies zu vermeiden müssten die Elemente vorher nach z-index sortiert werden und die z-index-Verringerung bei dem begonnen mit dem kleinsten z-index, der größer als der alte des angeklickten Elements ist, begonnen werden.

Vielleicht kann man das ganze auch ohne z-index für die einzelnen Elemente lösen.
Wenn die sich alle in einem Container befinden, dann könnte man einfach das jeweils aktuelle Element, welches das "höchste" werden soll, im DOM ans Ende des Containers verfrachten (appendChild) - und sich mit der normalen Schichtung der Elemente gemäß ihrer DOM-Reihenfolge begnügen.

MfG ChrisB

[Detlef G.]

Hallo ChrisB

Vielleicht kann man das ganze auch ohne z-index für die einzelnen Elemente lösen.
Wenn die sich alle in einem Container befinden, dann könnte man einfach das jeweils aktuelle Element, welches das "höchste" werden soll, im DOM ans Ende des Containers verfrachten (appendChild) - und sich mit der normalen Schichtung der Elemente gemäß ihrer DOM-Reihenfolge begnügen.

Schalge das mal Walter Zorn vor. Ich habe nicht vor ein solches Script zu schreiben.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo mxxxxx

ich habe der div box, in der der text liegt, bereits eine css positionierung und einen höheren z-index gegeben. leider erscheinen die bilder, nachdem ich sie verschoben habe, trotzdem vor (statt wie gewünscht hinter) dem text.

Was meinst du, wodurch die Bilder beim und nach dem Verschieben im Vordergrund erscheinen?
Das kann doch nur dadurch geschehen, dass das Javascript ihnen einen höheren z-index zuweist.

Ein z-index von 3 für den Text kann da niemals ausreichen, um im Vordergrund zu bleiben.

Auf Wiederlesen
Detlef