Относительное div перекрытие Фиксированные Divs

Question

Я разрабатываю мобильное приложение, и у меня проблема с относительными div, идущими над верхним и нижним заголовком, которые фиксируются с помощью z-индекса. Я провел некоторое исследование и попытался поместить z-индекс в относительный div, но он ничего не исправить.

Вот относительная 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> 

Вот отредактированная версия просто показать вопрос: JsFiddle

Answer 1

Поскольку ваши относительные элементы используют Z-индексы, ваши неподвижные элементы позиции должны иметь более высокий индекс должен появиться сверху.

В вашем примере JSFiddle, если я добавлю z-index: 3; или более к .StatsBar и .TabsBar, кажется, исправить это.

Answer 2

Из вашего примера я вижу, что StatsBar и TabsBar фиксированы, но без индекса z. Если вы всегда хотите, чтобы они отображались выше всех остальных, попробуйте добавить к ним значение z-index. Например 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/