使元素在一切的顶部 [英] 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屋!