是否可以使子分区浮动在所有其他分区之上，包括 z-index 设置高于父分区的分区？答案

【问题标题】：Is it possible to make a child division float on top of all other divisions, including those with z-index set higher than the parent?是否可以使子分区浮动在所有其他分区之上，包括 z-index 设置高于父分区的分区？
【发布时间】：2012-11-03 01:22:18
【问题描述】：

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

所以代码是这样的：

<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，它似乎可以正常工作，但不知道这是否是最好的解决方案，所以我欢迎任何其他可能的解决方案。

【问题讨论】：

你不能“漂浮在某物之上”，这不是浮动的工作方式。不过，您绝对可以将某些东西定位到任何您想去的地方
好吧，我的意思是透明背景在其他一切之上......如果我将位置设置为绝对位置，它只包含在该分区中，而不是扩展到整个页面跨度>
哦，你不是在谈论位置，而是在谈论 z-index，你想把它带到他们面前吗？使用 z-index
是的！ z-index 不适用于设置有特定值的兄弟姐妹。然而，它似乎是跨浏览器将 z-index 设置为 auto。
将z-index 设置为元素上的数字而不实际定位它不会有任何效果。设置z-index: auto 将具有相同的效果。你是如何定位这些盒子的？

标签： css xhtml

【解决方案1】：

恐怕问题出在您的 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 并使用外部样式表。

【讨论】：

是的，这就是问题所在。我不能这样做，因为它是Joomla的一个独立组件，它将所有输出的内容放在模板上的一个分区中，菜单在另一个分区中，并且模板在限制性框架（T3框架）上所以我不能只在 html 中添加一个 div。也许我需要更改 JS 以将背景 div 直接附加到 html 正文？但无论如何感谢您的信息。我想我会在这个上再磨一磨。

【解决方案2】：

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

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

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

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

【讨论】：