Charles Moore Charles Moore - 2 months ago 16
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>
<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>


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

Answer

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.