reinhard: Layer-Reihenfolge mit z-index

Hallo Leute,

für eine Webanwendung möchte ich Eingabemasken mit Layern machen. Ich habe DIV-Elemente (angelegt document.createElement("div") mit jscript, nicht im originalen Quelltext) mit dem Maskeninhalt (mit Element.innerHTML in das DIV-Element geschrieben), die sich überlappen können. Wenn nacheinander zwei Masken geöffnet werden, überlappt (verdeckt) die zweite Maske auch ordnungsgemäß die erste Maske. Dachte ich jedenfalls...

Die Überlappung klappt nicht bei <select>! Diese Elemente liegen immer im Vordergrund, allerdings überdeckt das später geladene <select>-Element das früher geladene. Ich habe schon mit dem z-index experimentiert (mit position:absolut), aber dieser Parameter scheint keinen Einfluß zu haben. Kennt sich damit jemand aus?

Vielen Dank im Voraus,
Reinhard

  1. [http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=z-index] Die Überlappung klappt nicht bei <select>!

    Das liegt an deinem Browser. Erst neuere Versionen erlauben es, select-Elemente oder Plugins per z-index zu überdecken. So es in deinem Browser nicht funktioniert, kannst du nichts dagegen tun.

    Roland

    --
    privoffgnaha:)
    1. Vielen Dank für die beiden Tipps. Sieht ja garnicht gut aus ...

      Vielleicht könnte man das select-Element ausblenden, wenn man es mit einem anderen Element überdeckt? Bis in unserem Intranet die Arbeitsplätze mit dem IE7 versehen werden, ist noch eine Weile hin. Wie verhält sich denn der Firefox in dieser Situation?

      Ganz herzlichen Dank für die zwar frustrierende, aber sehr (!) schnelle Antwort!

      Reinhard

      [http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=z-index] Die Überlappung klappt nicht bei <select>!

      Das liegt an deinem Browser. Erst neuere Versionen erlauben es, select-Elemente oder Plugins per z-index zu überdecken. So es in deinem Browser nicht funktioniert, kannst du nichts dagegen tun.

      Roland

    2. Hallo Orlando,

      [http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=z-index] Die Überlappung klappt nicht bei <select>!

      Das liegt an deinem Browser. Erst neuere Versionen erlauben es, select-Elemente oder Plugins per z-index zu überdecken. So es in deinem Browser nicht funktioniert, kannst du nichts dagegen tun.

      Doch doch, da gibt es einen ziemlich üblen Trick, diesen Bug auch im IE6 und tiefer zu beheben. Auf den hat mich auch erst unlängst ein Kollege aufmerksam gemacht:

      Man generiere mit document.createElement('IFRAME') einen Iframe, lade in diesen ein Dokument, das nichts weiter als ein leeres Body-Element enthält und baue diesen mit einem Z-Index tiefer passgenau als Zwischendecke positioniert mit den gleichen Ausmaßen (über offsetWidth und offsetHeight auszulesen) unter das FORM-Element, durch das nichts darunter Liegendes durchscheinen soll, in den Dom-Baum des Mutterdokuments ein.

      IFRAMES haben ja im IE die Eigenschaft, dass sie, wenn man ihnen nicht das Attribut allowtransparency="true" verpasst, nicht transparent sind, damit überdecken sie dann sogar darunter liegende SELECT-Elemente.

      Gruß Gernot

      1. IFRAMES haben ja im IE die Eigenschaft, dass sie, wenn man ihnen nicht das Attribut allowtransparency="true" verpasst, nicht transparent sind, damit überdecken sie dann sogar darunter liegende SELECT-Elemente.

        Gruß Gernot

        Hallo Gernot,
        das klingt nicht schlecht. Eigentlich wollte ich die IFRAMES vermeiden, aber wenn das funktioniert ... Nächste Woche werde ich Deinen Trick ausprobieren. Etwas ähnliches habe ich mit dem IMG-Tag ausprobiert. Da kann man etwas mit alpha-Kanälen machen. Dadurch werden z.B. Buttons abgedeckt, aber eben nicht "Selects".

        Danke erstmal,
        Reinhard

      2. Hallo nochmal,

        Man generiere mit document.createElement('IFRAME') einen Iframe,

        Es spricht im Normalfall natürlich auch nichts dagegen, das Zwischendecken-Iframe-Element auch direkt in den HTML-Code der Mutterseite zu schreiben.

        Gruß Gernot

        1. Hallo Gernot,
          danke für die vielen Tips. Ich habe den Trick mit dem IFRAME noch nicht ausprobiert, bin aber auf den Grund gekommen, warum mir die IFRAMEs nicht so ganz geheuer sind: im IE gibt es in den Internet-Optionen unter "Sicherheit" die Option, das Laden von Dateien in einen IFRAME garnicht zuzulassen oder nur nach Bestätigung durch den Anwender (wird empfohlen und ist Standardeinstellung des Browsers). Das wäre bei meiner Anwendung sicher nicht akzeptabel, wenn der Anwender das Laden der "Dummy"-Datei jedesmal bestätigen müßte. Hast Du damit Erfahrung? Wenn das tatsächlich so ist, scheiden die IFRAMEs leider aus. Dann muß ich Eingabemasken wie gehabt mit eigenen Fenstern machen.

          Schöne Grüße,
          Reinhard

      3. hi,

        Doch doch, da gibt es einen ziemlich üblen Trick, diesen Bug auch im IE6 und tiefer zu beheben. Auf den hat mich auch erst unlängst ein Kollege aufmerksam gemacht:

        http://forum.de.selfhtml.org/archiv/2006/5/t130145/#m841481

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. Hi,

    für eine Webanwendung möchte ich Eingabemasken mit Layern machen.

    was sind "Layer"?

    Die Überlappung klappt nicht bei <select>!

    Dieser Bug des Internet Explorers wurde mit der Version 7 behoben. Deine Formulierung lässt zudem den Schluss zu, dass Du den mit Abstand schwersten Fehler im Bereich der Web-Entwicklung begangen hast: Du testest zuerst mit dem IE. Behebe dieses Problem.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes