Fabian Sempf: z-index funktioniert nicht

Hallo!

Ich habe mehrere div-Bereiche auf meiner Seite, einige sind mit position: fixed festgenagelt, aber der Seiteninhalt hat keine spezielle Positionierung.
Das Problem ist jetzt, dass die festen divs immer über dem Seiteninhalt liegen, ich will sie aber dahinter haben, so dass man den Seiteninhalt über sie hinweg scrollen kann. Ausprobiert habe ich schon den z-index für die festen Elemente auf 0 und für die normalen Bereiche auf 99 zu setzten, aber ohne Wirkung.

Danke!
Fabian

  1. Hallo Fabian,

    Das Problem ist jetzt, dass die festen divs immer über dem Seiteninhalt liegen, ich will sie aber dahinter haben, so dass man den Seiteninhalt über sie hinweg scrollen kann. Ausprobiert habe ich schon den z-index für die festen Elemente auf 0 und für die normalen Bereiche auf 99 zu setzten, aber ohne Wirkung.

    Wenn die fixierten Elemente Nachfahren (Kinder) des normalen Bereichs sind, kannst du sie gemäß CSS2.1 selbst mit einem negativen z-index-Wert nicht hinter diesem platzieren. Siehe Abschnitt „<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=Beachten Sie>“.

    Definiere die fixierten Bereiche im Quelltext außerhalb des restlichen Seiteninhalts. Stehen sie davor, ist z-index nicht nötig.

    Grüße
     Roland

    1. Definiere die fixierten Bereiche im Quelltext außerhalb des restlichen Seiteninhalts. Stehen sie davor, ist z-index nicht nötig.

      Genau das habe ich gemacht, die fixen Bereiche sind außerhalb. Aber ich will sie ja eben nicht vor dem Text, sondern dahinter.

  2. Hi,

    aber der Seiteninhalt hat keine spezielle Positionierung.
    Ausprobiert habe ich schon den z-index [...] für die normalen Bereiche auf 99 zu setzten, aber ohne Wirkung.

    Daß z-index nur für positionierte Elemente gilt, ist Dir klar?

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Daß z-index nur für positionierte Elemente gilt, ist Dir klar?

      Sowas hatte ich befürchtet.
      Aber ich bin doch sicherlich nicht der Einzige, der Design-Elemente hinter den Seiteninhalt haben will, das muss doch irgendwie gehen.

      1. Hallo,

        Daß z-index nur für positionierte Elemente gilt, ist Dir klar?
        Sowas hatte ich befürchtet.
        Aber ich bin doch sicherlich nicht der Einzige, der Design-Elemente hinter den Seiteninhalt haben will, das muss doch irgendwie gehen.

        Ein Hintergrundbild mit Attachment fixed für den Body reicht nicht?

        Ansonsten brauchst Du für Deinen Inhaltsbreich ein eigenes Quasi-Body-Element, welches in der Reihenfolge nach dem Background-Element mit position:fixed kommt und die Eigenschaft position:relative hat. Für Geckos reicht das. Opera möchte trotz eindeutiger Reihenfolge noch mit z-index nachgeholfen bekommen.

        Bsp.:

          
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
                "http://www.w3.org/TR/html4/strict.dtd">  
        <html>  
        <head>  
        <title>Titel</title>  
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
        <style type="text/css">  
        <!--  
        #background {position:fixed; z-index:0; top:10px; width:100%; background-color:red;}  
        #content {position:relative; z-index:1}  
        -->  
        </style>  
        </head>  
        <body>  
        <div id="background">  
         <p>Background</p>  
        </div>  
        <div id="content">  
         <h1>Test</h1>  
         <p>Testtext</p>  
         <p style="height:1000px;">Testtext</p>  
        </div>  
        </body>  
        </html>  
        
        

        Dass der IE aber bis Version 6 nichts mit position:fixed anfangen kann, hast Du schon bemerkt?

        viele Grüße

        Axel

        1. Ein Hintergrundbild mit Attachment fixed für den Body reicht nicht?

          nein, in den fixen divs sind Links.

          Ansonsten brauchst Du für Deinen Inhaltsbreich ein eigenes Quasi-Body-Element, welches in der Reihenfolge nach dem Background-Element mit position:fixed kommt und die Eigenschaft position:relative hat. Für Geckos reicht das. Opera möchte trotz eindeutiger Reihenfolge noch mit z-index nachgeholfen bekommen.

          position: relative! Das war es, was ich brauchte. Ändert nichts an meinem Design, aber jetzt funktioniert der z-index so wie er soll!
          Vielen Dank!!!!

          Dass der IE aber bis Version 6 nichts mit position:fixed anfangen kann, hast Du schon bemerkt?

          Ja, weiß ich, da hab ich schon einen workaround gebaut. Ich hoffe, dass IE 7 das können wird.

          Also vielen Dank noch mal, du hast den Nagel auf den Kopf getroffen!
          CU Fabian

          1. Hi there,

            Ja, weiß ich, da hab ich schon einen workaround gebaut. Ich hoffe, dass IE 7 das können wird.

            Auch wenn er das beherrschen sollte, hast Du nicht viel davon. Es gibt noch genug Windowsversionen, auf denen der IE7 gar nicht installiert werden kann und wenn, wer sagt Dir, daß das jeder will? Ich fürchte, die nächsten drei bis fünf Jahre wird man auf Workarounds für den IE6 nicht verzichten können...

            1. Auch wenn er das beherrschen sollte, hast Du nicht viel davon. Es gibt noch genug Windowsversionen, auf denen der IE7 gar nicht installiert werden kann und wenn, wer sagt Dir, daß das jeder will? Ich fürchte, die nächsten drei bis fünf Jahre wird man auf Workarounds für den IE6 nicht verzichten können...

              Ist mir ja alles klar, die Seite geht ja auch im IE, aber in Firefox sieht sie eben besser aus. Der workaround bleibt drin, aber wenn der IE 7 fixe Positionierung kann, dann sehen halt alle die ihn nutzten die schönere Seite.
              Da Microsoft den neuen IE in Windows Vista einbauen und ab Anfang nächsten Jahres fast jeder neue Rechner mit Vista ausgeliefert wird, vermute ich allerdings, dass es keine drei Jahre dauern wird, bis der IE 7 eine spürbare Verbreitung hat.
              Ob ich allerdings bis dahin schon wieder eine total andere Webseite habe sei mal dahingestellt ;-)

              Schönen Sonntag noch!
              Fabian