Wie z-index und Position fixiert zusammenarbeiten, um in css

Question

html

<div class="overlay"> 

</div> 
<div class="fixed"> 
    <center> 

     <h3> 
      Only this thing should be brought on top of overlay.. 
     </h3> 
    </center> 

</div> 

<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br> 

CSS:

.fixed{ 
    position: fixed; 
    width: 100%; 
    height: 60px; 
    top:0; 
    left: 0; 
    background: #f4f4f4; 
} 
.fixed h3{ 
    position:relative; 
    z-index: 300; 
    color: #fff; 
} 

.overlay{ 
    background-color: #000; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    opacity: .5; 
    position: fixed; 
    z-index: 1; 
    -webkit-transition: all 0.3s ease-out; 
     -moz-transition: all 0.3s ease-out; 
     -ms-transition: all 0.3s ease-out; 
     -o-transition: all 0.3s ease-out; 
      transition: all 0.3s ease-out; 
} 

Jetzt Wie platziere ich den h3 in der .fixed div auf der Oberseite der Auflage erhalten. Bitte posten Sie etwas gelesen auf fest zusammen mit Z-Index.

http://jsfiddle.net/CvMLw/4/ Überprüfen Sie die oben jsfiddle, So wie ich das h3 auf der Overlay bringen ..

Answer 1

Sie setzen einen z-index auf ein Element in einem div befestigt, die unter dem Overlay ist.

Mit anderen Worten, die Überlagerung der z-index Wert versteckt 301.

Sie sehen, es ist wie lego Blöcke. .fixed ist an der Unterseite mit seinem Z-Index bei 0.

dann auf .fixed Ihre h3 300 Blöcke übereinander.

Wenn wir hinzufügen, zum Beispiel eines andere div unter dem h3 Tag mit z-index von 150, der „Turm von Blöcken“ niedriger wäre als die h3 so h3 auf der Spitze sein würde.

Dann gibt es eine andere div (.overlay) auf der gleichen Ebene wie DOM .fixed mit einer höheren als z-index.fixed. Dieser Block würde direkt über die 300 Blöcke von h3 platziert werden.

Zum Beispiel:

<==============================> <- the .overlay (z-index 1) 
      <=> 
      <=> 
      <=> 
      <=> 
    <=>  <=>    <- Elements inside .fixed (random z-index) 
    <=>  <=> 
    <=>  <=> 
    <=>  <=> 
    <=>  <=> 
<==============================> <- the .fixed (z-index 0) 

die h3 oben zu setzen, legt sie auf dem gleichen lvl Ihrer Overlay oder eine höheres .fixedz-index gesetzt.

Answer 2

Sie können das nicht tun, wenn .fixed Element als Halter für eines seiner Kinder fungiert. Diese

bedeutet, dass wenn zum Beispiel Sie setzen Ihre h3 mit einer absoluten Position auf dem Boden, es an der Unterseite des übergeordneten Elements gehen.

z-index funktioniert auf die gleiche Weise. Sein Wert wird vom Elternteil übernommen. Da der z-index Standardwert 0 ist, Ihr .fixed Element hat einen Wert von z-index0 und Ihre h3 hat erste0 und dann 300.

Answer 3

Ihre

position:fixed; 

ändern zu

position:absolute; 

auf .fixed, dann funktioniert es.