我正在使用960网格系统构建shopify主题。
我有以下布局:
<div id="header" class="container_16"> <!-- relatively positioned -->
<div id="tl_overlay"></div> <!-- absolutely positioned top:0 left:0 -->
.
.
.
</div>
<div id="nav" class="container_16">
<ul id="navlist" class="grid_16 push_1">
{% for link in linklists.main-menu.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
问题是div
tl_overlay
有一个背景图像,该图像溢出其内容(按设计)并与导航div重叠,使链接不可访问。我已经尝试在每个元素上设置适当的z索引,但仍然无法使其工作。有什么我忘了的或者我能试着解决的!谢谢
最佳答案
z索引必须工作,但是nav
和header
div应该以非静态方式定位。position: relative
应该在不破坏您的设计的情况下完成这个技巧。
因此,您应该确保css中包含以下内容:
#header{
z-index: 5;
postion:relative;/*or any other position except for static, depending on your design*/
}
#nav{
z-index:6;
postion:relative;/*or any other position except for static, depending on your design*/
}