z-index 不适用于 css3 下拉导航

发布于 2025-01-03 03:30:37 字数 566 浏览 1 评论 0原文

我正在修改我在教程中找到的 css3 导航,但我在 z 索引方面遇到了问题。

请查看此处的导航:

http://cafemeetup.com/testArea/nav/

无论是 2 个导航项,您都可以看到下拉框的 z 索引高于生成它的链接。 这是不正确的,因为我已将翻转框的 z 索引设置为在堆叠顺序中较低。

我想要实现的目标是让下拉框落在链接下方,这样下拉框的阴影在顶部不可见。我希望链接和下拉框融为一体,我认为通过将链接放在下拉框的顶部,我可以实现这一目标。

这是在 Shopify 完成的:

http://www.shopify.com/ (滚动“资源”)

无论如何,希望有人能阐明这一点。 我假设问题在于我尝试添加 z 索引的对象是悬停对象,而且它们本身也不是常规的 div。

不管怎样,谢谢你至少阅读了这一切。我很感激你的时间, 詹姆斯

I am modifying a css3 nav that i found in a tutorial and I am having trouble with the z-indexing.

Please check out the nav here:

http://cafemeetup.com/testArea/nav/

If you rollover either of the 2 nav items, you can see that the z-indexing of the drop down box is higher than the link that spawned it.
This is not true as I have made the z-index of the rollover box lower in the stacking order.

What I am trying to achieve is to have the drop down box fall underneath the link so the the drop shadow of the drop down box is not visible on top. I want the link and drop down box to meld into one and I think by making the link sit on top of the drop down box, I can achieve this.

It is done here at Shopify:

http://www.shopify.com/ (rollover 'resources')

Anyway, hope someone can shed light on this.
I am assuming that the problem lies in the fact that the object I am trying to add z-indexes to are hovers and also that they are not regular divs as such.

Anyway, thank you for at least reading all this. I appreciate your time,
James

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

会傲 2025-01-10 03:30:37

我在 jsFiddle 上为你做了一个演示。尝试将背景和 z-index 样式移动到 .drop 链接而不是代码中的列表项,它应该可以工作。

http://jsfiddle.net/sTsrb/

I made a demo for you on jsFiddle. Try moving your background and z-index style to the .drop link instead of the list item in your code and it should work.

http://jsfiddle.net/sTsrb/

捎一片雪花 2025-01-10 03:30:37

您将 z-index:999 应用于

  • 下方,请将其设为同级,而不是子级。
  • You are applying your z-index:999 to the <li class="menu_right"> and then applying z-index:1 to the <div class="dropdown_1column align_right"> child element. If you want it to appear underneath the <li>, make it a sibling, not a child.

    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文