相対的なdivの重複固定ディグ

Question

私はモバイルアプリケーションを開発していますが、Z軸で固定された上部と下部のヘッダーの上に相対的なdivがある問題があります。私はいくつかの研究を行い、相対的なdivにz-indexを置こうとしましたが、何も修正されませんでした。ここで

は相対事業部です：ここで

<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> 

はただ問題を示すために編集されたバージョンです： JsFiddle

Answer 1

あなたの相対的な要素がzインデックスを使用しているので、あなたの固定位置の要素を持っている必要があります。上に表示するインデックスが大きくなります。

JSFiddleの例では、z-index: 3;以上を.StatsBarと.TabsBarに追加すると修正されるようです。

Answer 2

私の例では、StatsBarとTabsBarは固定されていますが、Z-インデックスはありません。 常に他のものの上に表示したい場合は、それらにZ-インデックス値を追加してみてください。たとえば、20です。 次に、.ActivePage {z-index：10;ポジション：相対; }。 これはあなたのヘッダーとフッターを常にActivePage divの一番上に保ちます。

Answer 3

position: relative;追加と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/