Z-Index funktioniert nicht mit fester Positionierung

422

Ich habe eine divmit Standardpositionierung (dh position:static) und eine divmit einer fixedPosition.

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

    #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>
Erweitern Sie das Snippet

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

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

(Es scheint eine ähnliche Frage zu geben wie diese ( Fixed Positioning Breaking Z-Index ), aber es gibt keine zufriedenstellende Antwort, daher stelle ich dies hier mit meinem Beispielcode.)

css z-index DanSingerman
quelle

Antworten:

146

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 also einfach die Stapelregeln in einem Stapelkontext, und Sie werden sehen, dass die Elemente in dieser Reihenfolge gestapelt werden

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

Also kannst du

  1. Setzen Sie einen Z-Index von -1, denn #underpositioniert -ve Z-Index wird hinter nicht positioniertem #overElement angezeigt
  2. Stellen Sie die Position #overauf relativeso ein, dass Regel 5 für sie gilt

Das eigentliche 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 in einem Stapelkontext

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 Deckkraftwert 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 muss eine CSS-Eigenschaft, wenn sie in einem Offscreen-Kontext gerendert werden muss, einen neuen Stapelkontext erstellen.

Stapelreihenfolge in einem Stapelkontext

Die Reihenfolge der Elemente:

  1. Das Stammelement des Stapelkontexts (das <html>Element ist standardmäßig der einzige Stapelkontext, aber jedes Element kann ein Stammelement für einen Stapelkontext sein, siehe Regeln oben).
    • Sie können kein untergeordnetes Element hinter ein Root-Stacking-Kontextelement stellen
  2. Positionierte Elemente (und ihre untergeordneten Elemente) mit negativen Z-Index-Werten (höhere Werte werden vor niedrigeren Werten gestapelt; Elemente mit demselben Wert werden entsprechend dem Erscheinungsbild im HTML gestapelt)
  3. Nicht positionierte Elemente (sortiert nach Erscheinungsbild im HTML)
  4. Positionierte Elemente (und ihre untergeordneten Elemente) mit dem Z-Index-Wert auto (geordnet nach Darstellung im HTML-Code)
  5. Positionierte Elemente (und ihre untergeordneten Elemente) mit positiven Z-Index-Werten (höhere Werte werden vor niedrigeren Werten gestapelt; Elemente mit demselben Wert werden entsprechend dem Erscheinungsbild im HTML gestapelt).
Mr_Moneybags
quelle
3
Einige mögen dies auch hilfreich finden: Was Ihnen niemand über Z-Index erzählt hat
Mentalist
450

In position: relative;zu #over

    #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>
Erweitern Sie das Snippet

Geige

stephenmurdoch
quelle
14
updates.html5rocks.com/2012/09/… ist eine hervorragende Referenz dafür, wie fest, absolut und relativ positionell mit dem Z-Index interagieren.
Hat
@ Marflar Es ist mir ein Vergnügen. Übrigens, schauen Sie sich Ihre Geige an. </body>Am </html>Ende gibt es ein zusätzliches Tag und ein zusätzliches Tag .
Michel Ayres
2
Hier ist eine Geige , die den Stapelkontext demonstriert. Es wird hier erklärt .
Kdbanman
Das Entfernen position: relativevon über Element hat mein Problem tatsächlich behoben.
Alex G
dankesssss <3
Karl Anthony Baluyot
32

z-Index nur in einem bestimmten Kontext dh relative, fixedoder absolutePosition.

Der Z-Index für ein relatives Div hat nichts mit dem z-indexeines absoluten oder festen Div zu tun .

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

cusimar9
quelle
3
Können Sie die Funktionsweise von Z-Index in einem bestimmten Kontext erweitern und / oder eine Referenz bereitstellen?
DanSingerman
13
Der Z-Index beeinflusst die Reihenfolge von zwei Divs, selbst wenn einer positionell relativ und der andere absolut ist.
Raffael
65
Diese Antwort ist falsch. Hier ist eine Geige Demonstrieren Stapelkontext wie es erklärt hier . @ Daningerman.
Kdbanman
1
Vielen Dank für Ihr jsFiddle @kbdanman. Es hat mir geholfen, den Stapelkontext mit einem Bild zu verstehen.
Dhruvpatel
8
@ JoeMorano, Höheres z ist näher an der Spitze, unabhängig von der absoluten oder relativen Position. Was zählt, ist die Ebene im Dokumentbaum. Divs 4, 5, 6 sind Kinder von Div 3, während Divs 1 und 2 Geschwister von Div 3 sind. Div 1 hat ein höheres z als Div 3, also liegt Div 1 über Div 3 und allen seinen Kindern. Div 2 hat ein niedrigeres z als Div 3, also sind Div 3 und alle seine Kinder oben auf Div 2
kdbanman
31

Da Ihr overDiv keine Positionierung hat, weiß der Z-Index nicht, wo und wie er positioniert werden soll (und in Bezug auf was?). Ändern Sie einfach die Position Ihres Over-Div in Relative, damit es keine Nebenwirkungen auf dieses Div gibt, und dann wird das Under-Div Ihrem Willen gehorchen.

Hier ist dein Beispiel für jsfiddle: Fiddle

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

ich meine es ernst
quelle
18

Geben Sie das #underNegativ z-index, z-1

Dies geschieht, weil die z-indexEigenschaft in ignoriert wird. Dies ist position: static;der Standardwert. In dem CSS-Code, den Sie geschrieben haben, z-indexgilt dies 1für beide Elemente, unabhängig davon, wie hoch Sie ihn eingestellt haben #over.

Wenn Sie #undereinen negativen Wert angeben, steht dieser hinter jedem z-index: 1;Element, d #over. H.

Carlos Precioso
quelle
Ich hatte auch dieses Problem - das Setzen des 'under'-Div auf 0 hat bei mir funktioniert.
Mick Sear
5

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

thedanotto
quelle
0

das Verhalten von festen Elementen (und absoluten Elementen) wie in CSS Spec definiert:

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

Dies macht die Zindex-Berechnung etwas kompliziert. Ich habe mein Problem (dieselbe Situation) gelöst, indem ich dynamisch einen Container im Body-Element erstellt und alle diese Elemente (die als "meine festen" klassifiziert sind) innerhalb dieses Body-Level-Elements verschoben habe )

Bakhshi
quelle