您好,我的 css 有一个问题,我不太清楚如何解决我不确定是否有解决它的方法,但这里有。
假设我们有这个 html:
<ul id="menu">
<li>
<a href="#">Auto-moto, piese, accesorii<i class="icon-caret-right"></i></a>
<ul class="product-submenu">
<li><a href="#"><i>Auto-moto, piese, accesorii</i> <span>Short description</span></a></li>
<li><a href="#"><i>Item</i><span>Short description</span></a></li>
<li><a href="#"><i>Auto-moto, piese, accesorii</i><span>Short description</span></a></li>
<li><a href="#"><i>Item</i><span>Short description</span></a></li>
<li><a href="#"><i>Item</i><span>Short description</span></a></li>
</ul>
</li>
</ul>
还有这个 CSS:
ul#menu{
-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);
position:relative;
}
ul.product-submenu{
position:absolute;
}
例如,如果我希望能够将 ul#menu 设置在 ul.product-submenu 之上,鉴于 ul.product-submenu 是 ul#menu 的子项,我将如何实现这一点?
这本来可以用 z-index 轻松解决,标签是 sibling ,但在这种情况下我似乎无法弄清楚。
我在此链接中添加了一个 fiddle ,我想要的是能够将红色容器设置在绿色容器之上:fiddle
最佳答案
Lister 先生的建议有效,如果您将 20px 添加到 ul.product-submenu 的 top 属性,那么它会显示子菜单。
JSFiddle: http://jsfiddle.net/5rmgR/3/
ul.product-submenu{
position:absolute;
background-color:green;
top:20px;
left:100px;
z-index:-1;
}
如果您只需将 20px 添加到 top 属性,您甚至可以在没有 z-index 的情况下逃脱。
如果你希望菜单在该术语的其他含义中位于顶部,那么你可以尝试这样的事情: JSFiddle: http://jsfiddle.net/5rmgR/6/
ul#menu{
background-color:red;
}
ul.product-submenu{
position:relative;
background-color:green;
top:0;
left:100px;
width: 50%;
z-index: -1;
}
关于css - 将 child 设置在 parent 之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17124465/