DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
div {
z-index: 1; /* integer */
}Die z-index-Eigenschaft in CSS steuert die vertikale Stapelreihenfolge von überlappenden Elementen. Das heißt, welches Element physisch näher zu Ihnen erscheint. z-index beeinflusst nur Elemente, deren position-Wert von static (dem Standardwert) abweicht.
Elemente können sich aus verschiedenen Gründen überlappen, zum Beispiel weil eine relative Positionierung sie über etwas anderes geschoben hat. Ein negativer margin hat das Element über ein anderes gezogen. Absolut positionierte Elemente überlappen sich gegenseitig. Alle möglichen Gründe.
Ohne einen z-index-Wert werden Elemente in der Reihenfolge gestapelt, in der sie im DOM erscheinen (das unterste Element auf derselben Hierarchieebene erscheint ganz oben). Elemente mit nicht-statischer Positionierung erscheinen immer über Elementen mit statischer Standardpositionierung.
Beachten Sie auch, dass die Verschachtelung eine große Rolle spielt. Wenn Element B über Element A liegt, kann ein Kindelement von Element A niemals höher als Element B sein.
Beachten Sie, dass ältere Versionen von IE diese Kontextsache etwas durcheinanderbringen. Hier ist eine jQuery-Lösung dafür.
Weitere Informationen
- So funktioniert
z-index(Screencast) - Rationale
z-index-Werte z-indexverstehen (MDN)
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | Funktioniert | Funktioniert | Funktioniert | 4+ | 4+ | Funktioniert |
„Beachten Sie auch, dass die Verschachtelung eine große Rolle spielt. Wenn Element B über Element A liegt, kann ein Kindelement von Element A niemals höher als Element B sein.“
Das ist nicht ganz richtig. In Ihrer Abbildung wird „nicht Kind“ nur dann oben sein, wenn die grüne Box einen Stapelkontext startet, wofür sie einen z-index außer auto (oder eine Opazität außer 1,0) benötigt. Eine einfache position: relative startet keinen Stapelkontext.
Der Hauptpunkt bei Stapelkontexten ist, dass z-index verwendet werden kann, um die Stapelreihenfolge von Elementen nur innerhalb ihres eigenen Stapelkontexts neu anzuordnen. Dieser gesamte Stapelkontext hat eine Stapelposition innerhalb seines Stapelkontexts, die durch seinen z-index-Eigenschaft und die seiner Geschwister in diesem übergeordneten Stapelkontext bestimmt wird. Elemente aus unterschiedlichen Stapelkontexten werden daher niemals in der endgültigen Stapelreihenfolge verschachtelt (das ist es, was die Spezifikation meint, wenn sie sagt, dass Stapelkontexte „atomar“ sind).
Wenn Sie in Begriffen des „Maler-Algorithmus“ denken, bei dem Objekte von hinten nach vorne auf eine Szene gemalt werden, dann ist ein Stapelkontext wie ein Bild in einem Bild. Sie malen zuerst alles im Stapelkontext von hinten nach vorne in der richtigen Reihenfolge und fügen dann das gesamte Ergebnis dort ein, wo es hingehört, wenn Sie seinen übergeordneten Kontext malen.
Ohne z-index stapeln sich die Dinge ziemlich genau in DOM-Reihenfolge, aber mit positionierten Elementen oben. Es ist jedoch auch erwähnenswert, dass Floats auch vor Nicht-Floats (aber hinter den positionierten Boxen) gebracht werden.
Vielen Dank für den Kommentar. War sehr hilfreich.
Das hat mich eine Weile beschäftigt, also dachte ich, ich poste eine Notiz hier – vergessen Sie nicht, dass z-index immer noch den Überlauf des Elternteils respektiert. Wenn Sie also etwas trotz eines z-index von mehreren Millionen immer noch nicht sehen können, überprüfen Sie, ob es nicht durch overflow:hidden abgeschnitten wird.
Ich habe eine Stunde lang damit gekämpft, bis ich diesen Kommentar gelesen habe! Danke!
Ja, ich hatte auch mit demselben Problem zu kämpfen, dass der Überlauf des Elternteils ausgeblendet wurde, und Ihr Kommentar hat mich gerettet! Danke!
Brillant, hat mir einen Tag Kopfzerbrechen erspart, danke!
Danke danke danke!!
@Toby danke für den Tipp. Es hat funktioniert!
Es hat mir sehr geholfen. Danke!
Toby, das hat meinen Nachmittag gerettet.
Danke!
Danke Toby, du hast mir Zeit gespart
Absolute Lebensretter – vielen Dank!
Du bist ein Star!!!!
Jahre später gilt das immer noch. Prüfen Sie Ihren Überlauf, bevor Sie verrückt werden und versuchen, z-index herauszufinden.
Sie haben mir gerade viel Ärger erspart! Vielen Dank.
Zehn Jahre später rettet Tobys Kommentar immer noch Leben (diesmal meins).
Danke, ich habe heute wieder mit z-index gekämpft. Zum ersten Mal denke ich, ich könnte gewinnen!
Hallo, ich bin Ankush aus Indien und ich bin Webdesigner. Ich möchte mit Ihnen arbeiten, können wir reden? Mein Skype ist ankushkumawat
Hallo, ich bin auf ein Problem gestoßen, bei dem negative Z-Index auf IOS iPad 4 nicht funktioniert. Es ist ein echter Mist, da es ein Vollbild-BG nach hinten meines Templates schickte, was nützlich ist, da ich nicht jedem anderen Element einen Z-Index zuweisen muss. Weiß jemand eine passende Lösung, vielleicht hat iOS einige spezielle Befehle, was heutzutage im Trend liegt? Cheers.
@Toby: Danke Kumpel :) Kleinigkeiten :)
Z-index ist neu für mich. Ich bin immer noch nicht ganz klar darüber. Können Sie mir bitte einige Beispiele geben? Funktioniert es auch unter iOS?
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Dies ist eine Überschrift
Da das Bild einen z-index von -1 hat, wird es hinter dem Text platziert.
Z-index ist eine der wichtigsten CSS-Eigenschaften eines Elements, wenn ein Baustein über einen anderen gelegt wird. Danke. Gute Informationen
Danke für Ihre lebensrettenden Lehren! Sie haben mich vor dem Ertrinken gerettet!
Ich habe eine Stunde gebraucht, um das herauszufinden, und die Informationen waren hier. Sie sind erstaunlich
Danke. Ihr Kommentar hat mich vor dem Googeln gerettet
Danke für die Infos!! Wirklich hilfreich!!
Funktioniert nicht
Es funktioniert bei mir !!
Dieser Code funktioniert nicht, da die Position aller Ihrer Elemente relativ ist. Sie sollten versuchen, dass die Position der Eltern relativ ist und die Position des Kindes absolut. Dieser Code funktioniert definitiv.
Dies ist ein Absatz
p ist Elternteil und img ist Kind.
coole responsive Website :D
Weiter so
Das sind gute Kenntnisse, aber es wäre hilfreich, wenn Sie zeigen würden, wie man das „KIND“ über das „NICHT-KIND“ stapelt, während es trotzdem ein Kind des grünen Elements bleibt.
Schöner Artikel, Chef…
Hallo allerseits
Bitte lassen Sie mich wissen, ob es gut ist, z-index:1000 und höher zu geben?
Atul Bhalerao
Ich habe hier etwas darüber geschrieben: https://css-tricks.de/rational-z-index-values/
Ich habe diese Technik verwendet und wurde durch ein overflow: hidden; von Bootstrap aufgehalten.
Hervorragende visuelle Beispiele, ich habe es ausprobiert und es funktioniert „z-index:2;“
Vielen Dank. Nach 12 Stunden Kampf habe ich es endlich mit Ihrer Hilfe gelöst.
Vielen Dank....
Hallo Cris! Hier noch eine interessante Sache, wie OPACITY die Positionierung ändern kann. http://codepen.io/dagolinuxoid/pen/GJgBaK
Ich habe Chris ohne „h“ geschrieben – kann es nicht glauben)) … Entschuldigung.
DANKE, das hat bei mir funktioniert! Ich habe die Opazität des Containers entfernt und der h1-Text erschien – super.
Ich habe eine Website – http://www.couponcandy.in/ – bei der mein Menü eine Kategorie hat, die unter meiner AdSense-Anzeige verschwindet, wenn ich mit der Maus darüber fahre. Jede Hilfe wäre großartig.
Danke! War wirklich hilfreich
Danke! Endlich ist mein Problem gelöst ... :D
Ich möchte die Adresse auf den Google Maps auf meiner Website mit z-index platzieren. Kann mir jemand helfen
Es hat mir sehr geholfen, meine Fähigkeiten zu verbessern OyoRooms Gutscheincode
Sehr schön! Vielen Dank :)
Big Data ist eine Kombination aus online laufenden Anwendungen in riesigem Maßstab, die aus (etwas Wertvollem) Hardware aufgebaut sind. Es hilft beim Speichern und Verarbeiten riesiger Datenmengen auf schnellere und Big Data QA Tester Training (liefert viel für eine gegebene Geldmenge) Weise. Die Rolle des Big Data QA Tester Engineers erstreckt sich auf verschiedene Bereiche, wenn sich die Organisation entscheidet, sich leicht zu verändern und sich zu einer verbesserten Technologie zu entwickeln. Bei Big Data QA-Testern (prüft auf Wahrheit/beweist Wahrheit) , die erfolgreiche Verarbeitung von (Billionen Byte) Daten unter Verwendung einer (etwas Wertvollem) Gruppe und anderer unterstützender Teile/Stücke. Es erfordert ein hohes Maß an Testfähigkeiten, da die Verarbeitung sehr schnell erfolgt. Es beinhaltet die Überprüfung verschiedener (Merkmale/Qualitäten/Eigenschaften) wie menschliches Ähnlichsein, (Qualität, der Wahrheit oder der wahren Zahl sehr nahe zu sein), (Kopieren von etwas/mehr als eine Person oder ein Unternehmen tut dasselbe), (Zustand des ständigen Arbeitens oder des Erscheinens auf die gleiche Weise), (etwas ist wirklich, was es zu sein vorgibt), Datenvollständigkeit usw. Big Data QA Tester Training Kurse sind darauf ausgelegt, Fehler aus Hadoop-Projekt-Leistung zu testen und zu beheben.
Wie bekomme ich mein MailChimp Pop-up so, dass es über dem Seiteninhalt liegt?
Ich versuche, das MailChimp-Newsletter-Pop-up über dem Logo und der Navigationsleiste anzuzeigen, aber so wie es ist, wird es hinter den beiden gefangen, was es unwirksam macht.
Kann mir jemand Code geben, damit das Newsletter-Pop-up über dem Seiteninhalt liegt?
Ich habe bereits diesen CSS versucht
.mc-modal-bg { z-index: 99995 !important; }
.mc-modal { z-index: 99999 !important; }
Aber es funktioniert nicht.
Außerdem überlappen sich alle Feature-Bilder der Artikel (sowohl auf dem Desktop als auch auf Mobilgeräten).
Die Homepage ist jetzt ein totales Chaos, da wir nur wenige Bilder sehen können (weil die anderen dahinter versteckt sind).
Vielen Dank für Ihre Hilfe!
Les vaillantes
http://www.lesvaillantes.com
Hallo Les! Sie müssen möglicherweise
position: relative;oder etwas Ähnliches hinzufügen.z-indexerfordert, dass die Position des Elements explizit im Regelwerk angegeben wird.Hallo Geoff!
Vielen Dank für Ihr schnelles Feedback! Wie mache ich das?
Ich habe wenig CSS-Kenntnisse…
Danke!
Etwas wie das
.mc-modal-bg {position: relative;
z-index: 99995 !important;
}
Eine Sache, die Sie beachten sollten, ist, dass MailChimp's CSS möglicherweise nicht direkt überschrieben wird, wenn Sie das Modal über ein von ihnen bereitgestelltes Skript eingebettet haben.
Meine Frage ist… wie kann ich sagen… seltsam… Diese Website zeigt eine Autocomplete-Komponente, die aus einem input, einem dataList und einem select-Element gebaut ist…
In den Chrome-Entwicklertools habe ich es in ein div mit geringer Höhe und überlaufenden Richtungen verpackt, dann auf das Eingabefeld geklickt und tah-dah!! Es geht über alles hinweg…
Stellen Sie das Browserfenster auf eine sehr geringe Höhe ein und klicken Sie erneut auf die Eingabe. Zu meiner Überraschung ging es über die Adressleiste und Lesezeichen des Browsers…. Wie ist das möglich? Ist es möglich, sich mit CSS anzunähern? Liegt das daran, dass der Webbrowser die reinen HTML-Elemente auf dem Fenster auf eine eigenartige Weise platziert?
Bilder: eingepacktes div, über DevTools, über Browser-Elementen
Danke!