Charles Moore Charles Moore - 5 months ago 46
CSS Question

Relative div overlapping Fixed Divs

I'm developing a mobile app, and I'm having an issue with relative divs going above the top and bottom header that are fixed with a z-index. I did some research and tried to put a z-index in the relative div, but it did not fix anything.

Here's the Relative Div:

<div class="pure-u-1-3">
<div class="TopMobBlock">
<div class="TopMobName">Open Slot</div>
<div class="TopMobImage">
<img src="" height="100%" width="100%" />
<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>

Here's an edited version to just show the issue:


Since your relative elements are using z-indexes, your fixed position elements will need to have a greater index to appear on top.

In your example JSFiddle, if I add z-index: 3; or greater to .StatsBar and .TabsBar it seems to fix it.