图像旋转器上的 Javascript 下拉菜单

Posted 2023-03-06

【中文标题】图像旋转器上的 Javascript 下拉菜单

【英文标题】：Javascript Drop Down Menu over Image Rotator

【发布时间】：2011-03-24 08:02:19

【问题描述】：

这里是设计师，正在尝试编码。

我快到了！试图从动态驱动器中获取下拉菜单以处理 jQuery 图像旋转器。玩过z-index。除了 IE 兼容模式，我可以让菜单在所有浏览器上处理图像旋转，无法单击旋转器中的按钮。

http://local495.bigrigmedia.com/

任何帮助将不胜感激！

【参考方案1】：

在 Photoshop 中让所有内容看起来正确总是容易得多，是吗？您可以通过对 CSS 进行 2 次小调整来解决重叠问题：

styles.css

#top 
    position: relative;
    z-index: 2;
    height: 155px;

ddsmoothmenu.css

.ddsmoothmenu
    position: relative;
    z-index: 2;
    /* remaining css */

homerotation.css

div#feature_list 
    position: relative;
    z-index: 1;
    /* remaining css */

我还注意到你的 CSS 周围有很多 z-index: -100。这些也会给你带来麻烦。我建议将它们全部取出并仅使用上述 2 项更改。

以上两条规则所做的是以所有浏览器（包括我们的朋友 IE）都能理解的方式为菜单和图像旋转器建立堆叠顺序。

使用 z-index 时 IE 的技巧是确保您尝试重叠的所有元素都在同一个堆叠上下文中。每当您在元素上使用相对、绝对或固定位置时，IE 都会创建一个新的堆叠上下文。在我们上面的例子中，我们将堆叠顺序设置在堆叠上下文（即文档）中最顶部的元素上，因此它将被尊重。

编辑

为 #top 容器添加了 z-index，因为这实际上是 <div>，在文档中与 <div id="feature_list"> 处于同一级别。

【讨论】：

感谢您的快速回复！我已经实现了您的 CSS 修改，但在 IE 兼容模式下仍然存在问题。下拉菜单现在位于图像旋转器的后面。建议？为什么不能每个人都只使用 Firefox？

因为有很大一部分使用互联网的人不为它编写代码......检查我编辑的答案以获得修复。

非常感谢！你为我节省了很多时间和头痛。