CODEWITHSUNDEEP
htmlcss
Charles Moore
Charles Moore

Reputation: 103

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

Upvotes: 0

Views: 1112

Answers (3)

Johannes
Johannes

Reputation: 67768

Add position: relative; and z-index: -1; to .pure-u-1-3:

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

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

Upvotes: 0

Theodoros Klikas
Theodoros Klikas

Reputation: 2129

From your example I can see that StatsBar and TabsBar are fixed but without a z-index. If you always want them to appear above everything else try adding a z-index value to them. For example 20. Then add .ActivePage { z-index: 10; position:relative; }. This will keep your header and footer always at the top of your ActivePage div.

Upvotes: 0

Jody Heavener
Jody Heavener

Reputation: 2874

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.

Upvotes: 1

Related Questions