[英]z-index not working in responsive menu
I have two separate menus for mobile and desktop sites.I have added a very high z-index to this nested menu but it still hides behind other elements and is not displayed at the top. 我有两个用于移动和桌面网站的单独菜单。我在此嵌套菜单中添加了非常高的z-index,但是它仍然隐藏在其他元素后面,并且不显示在顶部。 So how do we make this at top of all other elements.
那么我们如何在所有其他元素之上做到这一点。 Here is sample of layout:
这是布局示例:
<nav id="responsive_main_menu">
<div id="navigate-to">Navigate to</div>
<ul id="menu-main-menu-1" class="menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home alpha"><a href="#"><span>Home</span></a></li>
</ul>
Here is the CSS: 这是CSS:
#responsive_main_menu .menu,#responsive_main_menu .menu ul {
z-index: 999999;
}
Here is the url showing this problem. 这是显示此问题的网址。 Resize the page to smaller version to see the blue menu.
将页面调整为较小的版本以查看蓝色菜单。 http://daccordinc.com/
http://daccordinc.com/
You need to apply a position property other than the default value, static
in order to change the stacking context of an element. 您需要应用除默认值
static
以外的position属性,以更改元素的堆叠上下文。 Add relative positioning to the below selector: 在下面的选择器中添加相对位置:
#responsive_main_menu {
position: relative;
z-index: 999999;
}
http://img836.imageshack.us/img836/1389/wgyj.jpg http://img836.imageshack.us/img836/1389/wgyj.jpg
z-index
won't work if you don't have any position
declared 如果您未声明任何
position
则z-index
无效
I added position: relative;
我添加了
position: relative;
there and see the difference now 在那里,看看现在的区别
z-index
needs position
to be different than static
(which is the default) to work. z-index
需要与static
position
(默认设置)不同的position
才能工作。
Try relative
, it'll work: 试试
relative
,它将起作用:
#responsive_main_menu .menu, #responsive_main_menu .menu ul {
z-index: 999999;
position: relative;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.