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:

http://jsfiddle.net/n2Kq5/

http://jsfiddle.net/U8Jem/1/

  • 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 🙁
InformationsquelleAutor Sean | 2013-11-07
Schreibe einen Kommentar