[英]CSS / jQuery Dropdown menu. Z-Index not behaving as expected
I have a drop down menu that is attached to a fixed navigation bar.我有一个附加到固定导航栏的下拉菜单。 Similar to the one the current Twitter design uses.
与当前 Twitter 设计使用的类似。
Here is link to this issue: http://jsfiddle.net/JDahp/3/ (This has been updated to be far more simple than previous iterations)这是此问题的链接: http://jsfiddle.net/JDahp/3/ (这已更新为比以前的迭代简单得多)
I use jQuery to make the menu appear / disappear which works fine.我使用 jQuery 使菜单出现/消失,效果很好。 The menu animates OVER the toolbar as opposed to under it.
菜单在工具栏上方而不是在其下方进行动画处理。
I cannot understand why z-index isn't overriding the usual visual stacking for the drop down menu?我不明白为什么 z-index 没有覆盖下拉菜单的通常视觉堆叠?
Here are the relevant CSS properties以下是相关的 CSS 属性
#top-stuff{
position:fixed;
top:0;
left:0;
z-index:12;
width:100%;
}
.dropdown {
position: absolute;
z-index: 1;
}
A cut down version of the HTML: HTML 的精简版:
<div id="top-stuff">
<a href="" class="optionslinka">Options</a>
<div class="dropdown" id="optionsdropdown">
<!-- Drop down content is here -->
</div>
</div>
Your fiddle is a little complex and busy for me to look through, but I think it's likely your issue relates to the z-index bug that IE is known for (but has affected other browsers as well).你的小提琴对我来说有点复杂和忙,但我认为你的问题很可能与 IE 众所周知的 z-index 错误有关(但也影响了其他浏览器)。
Basically, if z-index
isn't defined on all of your parent containers, then each z-index
will start a new 'stacking context`, meaning they will not overlap properly.基本上,如果没有在所有父容器上定义
z-index
,那么每个z-index
将启动一个新的“堆叠上下文”,这意味着它们不会正确重叠。 Think of 2 decks of cards rather than one.想想两副牌而不是一副牌。
Try setting position:relative;z-index:auto;
尝试设置
position:relative;z-index:auto;
on all of the parent containers above .dropdown
(or any other position:
like absolute
etc)在
.dropdown
上方的所有父容器上(或任何其他position:
如absolute
等)
Some resources to learn more:了解更多信息的一些资源:
Drop Down Menu Issues: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/下拉菜单问题: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
An in depth look: http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/深入了解: http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/
A similar issue to yours: http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/与您类似的问题: http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
you'll notice that any positioned element, with any z-index, that is located lower down in the code than the menus will appear above the menus—no matter what z-index the menu is given—exactly the opposite of what you want to happen.
您会注意到,在代码中位于低于菜单下方的任何定位元素(具有任何 z-index)都将出现在菜单上方(无论给定菜单的 z-index 是什么),这与您想要的完全相反即将发生。
i removed all the z-index bits and just put我删除了所有的 z-index 位,然后放
z-index: -1;
on this在这
#optionsdropdown
which seemed to work i believe the problem stems from the containing element having position fixed..这似乎有效,我相信问题源于修复了 position 的包含元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.