相對div重疊固定Divs

Question

我正在開發一個移動應用程序，但在使用div固定在頂部和底部標頭上方並由z-index固定的相對div時出現問題。 我進行了一些研究，並嘗試在相對div中放入一個z-index，但它沒有解決任何問題。

這是相對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-indexes，因此您的固定位置元素將需要具有更大的索引才能顯示在頂部。

在您的示例JSFiddle中，如果我添加z-index: 3; 或更大的.StatsBar和.TabsBar似乎可以解決它。

Answer 2

從您的示例中，我可以看到StatsBar和TabsBar是固定的，但沒有z-index。 如果您始終希望它們顯示在所有其他元素之上，請嘗試向其添加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/