Question

我正在开发一个移动应用程序，我遇到的问题是相对div超过了使用z-index修复的顶部和底部标题。我做了一些研究并尝试在相对div中放置一个z-index，但它没有修复任何东西。

这是相对分区：

    <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-index，因此您的固定位置元素需要有更大的索引才能显示在顶部。

在你的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/

相对div重叠固定Div

3 个答案: