Ist position: fixed z-index relativ zu seiner übergeordneten z-index?
Habe ich eine Feste position der Elemente innerhalb eines relativ positionierten Elements, soweit ich betroffen bin, die position: relative
element sollte keine Auswirkungen auf die position: fixed
(Feste Elemente sind relativ positioniert, um das Fenster, richtig?).
Jedoch die festen Elemente z-index scheint zu sein, geerbt von den Eltern, bis zu dem Punkt, wo es z-index kann nicht höher als seine Eltern z-index.
Ich hoffe, ich mache Sinn? Unten ist ein HTML-Beispiel von was ich spreche:
CSS:
.outer {
position: relative;
z-index: 2;
}
.inner {
background: #fff;
left: 50px;
position: fixed;
top: 40px;
z-index: 1000000;
}
.fade {
background: #555;
bottom: 0;
left: 0;
opacity: 0.5;
position: fixed;
right: 0;
top: 0;
z-index: 3;
}
HTML:
<div class="outer">
<div class="inner">testing testing</div>
</div>
<div class="fade"></div>
Wenn Sie Folgendes ändern:
.outer { position: relative; z-index: 4; }
Dann die .inner
- element erscheint vor der fade element.
Ich finde dieses Verhalten sehr eigenartig... gibt es eine Möglichkeit arbeiten, um dieses, ohne die .inner
div, oder das ändern der CSS des .outer
div?
Nestelt an der oben genannten code-Beispiele:
- Könnte sein, in Bezug auf diese Antworten schrieb ich eine Weile zurück.. Wie, um in umgekehrter Reihenfolge verschachtelte untergeordnete Elemente und Z-index unterhalb vom text, sondern vor hintergrund Ziemlich sicher, dass entweder einer von Ihnen wird dir helfen.. es ist nicht möglich, für die child-element, das eine höhere
z-index
als die Eltern - wie bereits in meinen Antworten. - Meinst du wie das??
- danke, aber das funktioniert nicht ganz wie es muss auch sehen das fiddle: jsfiddle.net/Lwj22 Der schwarze bg/white text angezeigt werden muss hinter dem verblassen, während die weißen bg muss im Vordergrund erscheinen, sind Sie Beispiel bedeutet sowohl vor erscheinen der modalen.
- Und danke @JoshC Lesen Sie nun, sieht nicht wie es geht um eine einfache Lösung für dieses problem leider auch 🙁
Du musst angemeldet sein, um einen Kommentar abzugeben.
Kurz gesagt, ja, ein element mit
position:fixed
ist begrenzt durch seine Eltern z-index gegeben, die Elternz-index
definiert ist.Traurig, Sie zu informieren, aber was Sie wollen, ist derzeit nicht möglich. Der einzige Weg, können Sie den Effekt, den Sie wünschen, ist ändern Sie Ihre HTML - oder entfernen Sie den z-index von
outer
.Ändern von HTML-Optionen
Die erste option ist, sich zu bewegen
inner
außerhalb derouter
, die Aussehen würde wie diese.Die zweite option, um eine HTML-fix zu bewegen ist
fade
innerhalb vonouter
(mit den gleichen CSS auch) - demo hier.Eine Dritte option wäre, die demo ist hier zu finden .
fade
innerhalb vonouter
und dann auchinner
innerhalb vonfade
, aber das erfordert die Verwendung von rgba-Farben und Deckkraft -Ändern der CSS-Optionen
Die nächste Sache, die Sie bekommen können verwenden die gleiche HTML haben Sie derzeit ist, entfernen Sie den z-index von
outer
- Demo hier. Sie würden denken, dass Sie Sie könnten erhöhen Sie einfach jedes element den z-index von beiden, aber das funktioniert nicht aufgrund der Tatsache, dass Kinder Elemente kann nicht über einen höheren z-index als Ihre Eltern (wenn die Eltern z-index gesetzt ist).Erklärung
Wenn Sie darüber nachdenken,
fade
undouter
sind auf dem gleichen Niveau. Das, was du versuchst zu tun haben, istfade
bleiben auf demselben Niveau, aber auch haben es auf der Ebene oben, was unmöglich ist. Es ist wie der Versuch zu sein, auf zwei Etagen in einem Gebäude auf einmal, es kann nicht getan werden.Obwohl das, was Sie brauchen, ist nicht direkt auf diesen Artikel beziehen, Philip Walton erstellt, einen großen Beitrag auf z-Indizes und die Wirkung, Deckkraft, hat auf Sie, die könnte nützlich sein, andere suchen in dieser Frage.