Relative div Überlappung Feste Divs

Question

Ich entwickle eine mobile App, und ich habe ein Problem mit relativen Divs über den oberen und unteren Header gehen, die mit einem Z-Index behoben sind. Ich habe etwas recherchiert und versucht, einen Z-Index in das relative div zu setzen, aber es hat nichts repariert.

Hier ist die Relative Div:

<div class="pure-u-1-3"> 
     <div class="TopMobBlock"> 
      <div class="TopMobName">Open Slot</div> 
      <center> 
       <div class="TopMobImage"> 
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Open&w=100&h=100" height="100%" width="100%" /> 
       </div> 
      </center> 
      <center><input type="submit" class="TopMobBlank" value="Claim Bonus" /></center> 
      <center><input type="submit" class="TopMobBlank" value="Send Energy" /></center> 
      <div class="TopMobOpenBlock"> 
       <div class="TopMobOpenText">Open Slot</div> 
      </div> 
     </div> 
    </div> 

Hier ist eine bearbeitete Version nur die Ausgabe zeigen: JsFiddle

Answer 1

Da Ihre relativen Elemente verwenden z-Indizes, Ihre feste Position Elemente haben müssen ein größerer Index wird oben angezeigt.

In Ihrem Beispiel JSFiddle, wenn ich hinzufügen z-index: 3; oder größer zu .StatsBar und .TabsBar scheint es zu beheben.

Answer 2

Aus Ihrem Beispiel kann ich sehen, dass StatsBar und TabsBar sind fest, aber ohne einen Z-Index. Wenn Sie immer möchten, dass sie über allem anderen erscheinen, versuchen Sie, ihnen einen Z-Index-Wert hinzuzufügen. Zum Beispiel 20. Fügen Sie dann .ActivePage {z-index: 10; Position: relativ; }. Dadurch bleiben Ihre Kopf- und Fußzeile immer an der Spitze Ihres ActivePage-Bereichs.

Answer 3

hinzufügen position: relative; und z-index: -1;-.pure-u-1-3:

.pure-u-1-3 { 
    width: 32%; 
    width: 31.9690%; 
    position: relative; 
    z-index: -1; 
} 

https://jsfiddle.net/3Ljtywov/1/