2

很抱歉，如果这个问题已经被问过，但我确实搜索并找不到它。基本上我的页面中有一个下拉菜单，通常需要出现在主要内容的顶部。但是在该内容中是一个灯箱类型的东西，需要浮在上面。

所以代码是这样的：

<div style="z-index:2"> 
   Drop Menu here
</div>
<div style="z-index:1">
   Content Here... 
   <a href="#">Lightbox button here</a>
   <div>
        Lightbox content (hidden initially)
   </div>
   <div>
        Lightbox background (hidden initially)
   </div>
</div>

所以现在我遇到的问题是，如果我尝试将灯箱背景设置为高 z-index，它不会覆盖菜单，因为它的父级比同级菜单分区的 z-index 低。如果我将内容容器设置为更高级别，则下拉菜单不再出现在内容顶部，因此无法点击。我知道这可能是我在这里遗漏的一个明显的东西，或者我使用的灯箱插件可能不是那么好或什么？而且我使用的是 joomla CMS，所以我仅限于可以创建灯箱部门的地方。

否则我认为的另一个选项是将菜单上的 z-index 设置为子分区（实际菜单），但问题是它是一个框架系统，所以我还需要从基本模板中删除 z-index，然后它会被更新覆盖，除非有一个 z-index 命令将它设置为“忽略”或什么？

好的，没关系，我将 z-index 设置为 auto 并且它似乎正在工作，但不知道这是否是最好的解决方案，所以我会欢迎任何其他可能的解决方案。

4

2 回答 2

0

好的，所以它完美工作的唯一方法是使用 jquery 将分区附加到正文。所以在我的灯箱脚本中我添加了：

jQuery('body').append(modalBG);
jQuery('body').append(modal);

其中modal和modalBG分别是弹出内容和背景的div。

将其添加到创建灯箱的函数中，它将它们添加为主体中的最后一个子级，这意味着自然出现在所有其他 div 的顶部，但我想你也可以为此设置一个固定的 z-index。我意识到这对专业人士来说可能是很明显的事情，但我与它作斗争，所以也许其他正在努力使用限制性模板和 CMS 系统的人会欣赏这些信息。

于 2012-11-16T13:27:20.123 回答
0

恐怕问题出在您的 HTML 上。您应该将灯箱容器放在内容 div 之外作为 body 标记的子级。

例子：

<div style="z-index:2"> 
   Drop Menu here
</div>
<div style="z-index:1">
   Content Here... 
   <a href="#">Lightbox button here</a>
</div>

<div style="z-index:101">
    Lightbox content (hidden initially)
</div>
<div style="z-index:100">
    Lightbox background (hidden initially)
</div>

注意：您当然应该为上述所有内容分配 id 并使用外部样式表。

于 2012-11-16T03:15:41.327 回答