我有一个使用 jQuery 的简单 Accordion 菜单,但我在设置它的样式时遇到了问题,因此每个元素都会在每个后续元素上转换阴影。该菜单由一个无序列表组成,其中每个元素都是一个链接,单击该链接会触发向下/向上滑动以显示/隐藏一个部分。我想要的只是每个标题,橙色框,在它后面的那个上投下阴影,但似乎没有多少 z-indexing 可以克服列表设置的默认值(如果我删除列表背景或使阴影上升而不是向下我可以看到它们)。
Here you can see I've tried everything I can think of to make things order correctly .我已经按降序对列表元素和 anchor 进行了 z 索引,但仍然没有成功。任何人都知道如何让盒子阴影在这里正常工作?你可以看到影子看起来找到的最后一个元素,我想要在每个元素下面。
最佳答案
其实你很亲近...
原因:
- 堆叠顺序覆盖阴影
- z-index 仅适用于
position
而非static
的元素
所以,解决方案是:
对于使用 z-index
的元素,添加 position:relative
。所以再添加一条规则应该会有所帮助:
ul#menu li,
ul#menu li a {
position:relative
}
对于除 IE 之外的大多数浏览器应该没问题,IE 在支持负 z-index 和 position: relative 方面有一些小麻烦 - 但由于它们没有漂亮的 box-shadow,您可以忽略它们。
替代方案:如果您不喜欢对每一行都使用 z-index,您可能更喜欢 inset
box-shadow,
ul#menu li a {
box-shadow:inset 0px 6px 13px #777;
}
Shadow 较弱,浏览器支持范围更窄(最新的现代浏览器),但编码更容易。
附注对于这个问题,添加一个 CSS 标签会有很大帮助。
关于css - Accordion 菜单中的框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8175148/