使元素在一切的顶部 [英] Make element on top of everything

问题描述

我有一个问题。我想让我的页脚在我的页面上的一切可能的顶部。窍门是，我使用Galleria插件，它有自己的风格和某种原因，即使我把 z-index：99999; 在我的 footer 它仍然不在上面。

I have a problem. I want my footer to be on top of everything else possible in my page. The trick is that I'm using Galleria plug-in and it has it's own style and for some reason even if I put z-index: 99999; on my footer it is still not on top.

这是galleria容器，插件的主div。

This is galleria container, the main div of the plug-in.

.galleria-container {
    overflow: hidden;
    width: 960px; /* This value is changed by JS */
    height: 520px; /* This value is changed by JS */
    min-width: 960px;
}

这是我的页脚容器

#footer
{
    z-index: 9999;
    width: 700px;
    height: 500px;
    position: absolute;
    background-color: aqua;
}

Okey所以当我加载我的网站是很好，我可以看到我的页脚，但是当我调整窗口大小，因此执行这个代码，它会再次隐藏。

Okey so when I load my website it is fine and I can see my footer, but when I resize windows thus executing this code it is hidden again.

$(".galleria-container").css("width", $(window).width());
$(".galleria-container").css("height", $(window).height());

推荐答案

z指数相对于其他元素-index在同一堆叠上下文。堆栈上下文定义为：

z-indicies are relative to other elements with a z-index in the same stacking context. Stacking context is defined by:

• 文档根


• 元素与位置：绝对或位置： relative和z-index


• 部分透明的元素，即它们具有不透明度< 1


• 在IE7中，任何具有position：absolute或position：relative的元素（这可能会导致许多错误，因为它是以这种方式执行的唯一浏览器）

• The Document Root
• Elements with position: absolute or position: relative and a z-index
• Elements that are partially transparent, that is they have an opacity < 1
• In IE7, any element with position: absolute or position: relative (this can cause many bugs since it is the only browser that acts this way)

简单地说，只要有一个符合上述任何一个的元素，堆栈上下文是重置，z-index只是相对于容器。

Put simply, whenever you have an element that matches any of the above, stacking context is reset and z-index is only relative to that container.

您的问题的简单答案是以下两种情况之一：

The simple answer to your question is one of two things:

• 提高z-index甚至更高（一些插件使用荒谬的z-索引数字）


• 确保您的页脚在堆栈上下文中高于插件。您可能需要上升到父节点以设置较高的z指数或将页脚从父级节点中拉出。

这篇关于使元素在一切的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！