wake-up-neo.com

Z-Index funktioniert nicht mit fester Positionierung

Ich habe eine div mit Standardpositionierung (d. H. position:static) und eine div mit einer fixed Position.

Wenn ich die Z-Indizes der Elemente setze, scheint es unmöglich zu sein, das feste Element hinter das statische Element zu setzen.

    #over {
      width: 600px;
      z-index: 10;
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
       <body>
          <div id="over">
             Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
          </div>  
          <div id="under">
          </div>
       </body>
    </html>

Oder auf jsfiddle hier: http://jsfiddle.net/mhFxf/

Ich kann dies umgehen, indem ich position:absolute für das statische Element verwende, aber kann mir jemand sagen , warum dies geschieht?

(Es scheint eine ähnliche Frage zu geben, ( Fixed Positioning breaking z-index ) aber es gibt keine zufriedenstellende Antwort, daher frage ich dies hier mit meinem Beispielcode.)

394
DanSingerman

Diese Frage kann auf verschiedene Arten gelöst werden. Wenn Sie jedoch die Stapelregeln kennen, können Sie die beste Antwort finden, die für Sie funktioniert.

Lösungen

Das <html> -Element ist Ihr einziger Stapelkontext. Befolgen Sie daher einfach die Stapelregeln in einem Stapelkontext und Sie werden sehen, dass die Elemente in dieser Reihenfolge gestapelt werden

  1. Das Stammelement des Stapelkontexts (in diesem Fall das <html> -Element)
  2. Positionierte Elemente (und deren untergeordnete Elemente) mit negativen Z-Index-Werten (höhere Werte werden vor niedrigeren Werten gestapelt; Elemente mit demselben Wert werden entsprechend der Darstellung im HTML-Code gestapelt)
  3. Nicht positionierte Elemente (sortiert nach Erscheinungsbild im HTML)
  4. Positionierte Elemente (und deren untergeordnete Elemente) mit dem Z-Indexwert auto (sortiert nach der Darstellung im HTML)
  5. Positionierte Elemente (und deren untergeordnete Elemente) mit positiven Z-Index-Werten (höhere Werte werden vor niedrigeren Werten gestapelt; Elemente mit demselben Wert werden entsprechend der Darstellung im HTML-Code gestapelt)

Also kannst du

  1. setzen Sie einen Z-Index von -1, damit #under positioniert -ve Z-Index hinter dem nicht positionierten #over Element erscheint
  2. setzen Sie die Position von #over auf relative, damit Regel 5 auf sie angewendet wird

Das wahre Problem

Entwickler sollten Folgendes wissen, bevor sie versuchen, die Stapelreihenfolge von Elementen zu ändern.

  1. Wenn ein Stapelkontext gebildet wird
    • Standardmäßig ist das <html> -Element das Stammelement und der erste Stapelkontext
  2. Stapelreihenfolge innerhalb eines Stapelkontexts

Die folgenden Regeln für die Stapelreihenfolge und den Stapelkontext stammen von diesem Link

Wenn ein Stapelkontext gebildet wird

  • Wenn ein Element das Stammelement eines Dokuments ist (das <html> -Element)
  • Wenn ein Element einen anderen Positionswert als statisch und einen anderen Z-Indexwert als auto hat
  • Wenn ein Element einen Opazitätswert von weniger als 1 hat
  • Mehrere neuere CSS-Eigenschaften erstellen auch Stapelkontexte. Dazu gehören: Transformationen, Filter, CSS-Regionen, ausgelagerte Medien und möglicherweise andere. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • In der Regel scheint es, dass eine CSS-Eigenschaft, die das Rendern in einem Offscreen-Kontext erfordert, einen neuen Stapelkontext erstellen muss.

Stapelreihenfolge innerhalb eines Stapelkontexts

Die Reihenfolge der Elemente:

  1. Das Stammelement des Stapelkontexts (das <html> -Element ist standardmäßig das einzige Stapelelement, aber jedes Element kann ein Stammelement für einen Stapelkontext sein, siehe Regeln oben)
    • Sie können ein untergeordnetes Element nicht hinter ein Stammstapel-Kontextelement stellen
  2. Positionierte Elemente (und deren untergeordnete Elemente) mit negativen Z-Index-Werten (höhere Werte werden vor niedrigeren Werten gestapelt; Elemente mit demselben Wert werden entsprechend der Darstellung im HTML-Code gestapelt)
  3. Nicht positionierte Elemente (sortiert nach Erscheinungsbild im HTML)
  4. Positionierte Elemente (und deren untergeordnete Elemente) mit dem Z-Indexwert auto (sortiert nach der Darstellung im HTML)
  5. Positionierte Elemente (und deren untergeordnete Elemente) mit positiven Z-Index-Werten (höhere Werte werden vor niedrigeren Werten gestapelt; Elemente mit demselben Wert werden entsprechend der Darstellung im HTML-Code gestapelt)
121
Mr_Moneybags

Fügen Sie position: relative; zu #over hinzu

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
    <body>
        <div id="over">
                Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
        </div>  
    
        <div id="under"></div>
    </body>
    </html>

Geige

438
stephenmurdoch

z-index funktioniert nur in einem bestimmten Kontext, d. h. an der Position relative, fixed oder absolute.

z-index für ein relatives div hat nichts mit dem z-index eines absoluten oder festen div zu tun.

EDIT Dies ist eine unvollständige Antwort. Diese Antwort enthält falsche Informationen. Bitte überprüfen Sie @ Dansingermans Kommentar und Beispiel unten.

34
cusimar9

da Ihr over Div keine Positionierung hat, weiß der Z-Index nicht, wo und wie er zu positionieren ist (und in Bezug auf was?). Ändern Sie einfach die Position Ihres Over-Divs in eine relative Position, damit es keine Nebenwirkungen auf diesen Div gibt und der Under-Div dann Ihrem Willen gehorcht.

hier ist dein Beispiel für jsfiddle: Fiddle

edit : Ich sehe jemanden, der diese Antwort bereits erwähnt hat!

29
iamserious

Geben Sie dem _#under_ ein negatives _z-index_, z. _-1_

Dies geschieht, weil die Eigenschaft _z-index_ in _position: static;_ ignoriert wird. Dies ist der Standardwert. In dem von Ihnen geschriebenen CSS-Code ist _z-index_ für beide Elemente _1_, unabhängig davon, wie hoch Sie ihn in _#over_ gesetzt haben.

Indem Sie _#under_ einen negativen Wert geben, steht er hinter jedem _z-index: 1;_ -Element, d. H. _#over_.

18
Carlos Precioso

Ich habe ein Navigationsmenü erstellt. Ich habe overflow: hidden im CSS meines Navis, das alles versteckt hat. Ich dachte, es sei ein Z-Index-Problem, aber ich habe wirklich alles außerhalb meines Navis versteckt.

5
thedanotto

Wenn sich Elemente außerhalb des normalen Flusses befinden, können sie andere Elemente überlappen.

gemäß Abschnitt überlappende Elemente auf http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp

3
Khoa Nguyen

das Verhalten von festen Elementen (und absoluten Elementen), wie in der CSS-Spezifikation definiert:

Sie verhalten sich so, als ob sie vom Dokument getrennt und im nächsten fest/absolut positionierten übergeordneten Element platziert würden. (kein wortweises Zitat)

Dies macht die Z-Index-Berechnung etwas kompliziert. Ich habe mein Problem (in der gleichen Situation) gelöst, indem ich dynamisch einen Container im body-Element erstellt und alle diese Elemente (die als "my-fixed-ones" klassifiziert sind) in dieses body-level-Element verschoben habe )

0
Bakhshi