Css 是否可以使子分区浮动在所有其他分区的顶部，包括z索引设置高于父分区的分区？

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

因此，代码类似于：

<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>

下拉菜单在这里
内容在这里。。。
灯箱内容（最初隐藏）
灯箱背景（最初隐藏）

所以现在的问题是，如果我尝试将lightbox背景设置为高z索引，它不会覆盖菜单的背景，因为它的父菜单的z索引低于同级菜单部分。如果我将内容容器设置为更高级别，则下拉列表将不再显示在内容顶部，因此不可浏览。 我知道这可能是我在这里缺少的一个明显的东西，或者我正在使用的lightbox插件不是很好或者什么的？ 我使用的是joomla CMS，所以我只能在哪里创建灯箱部门

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

---

好的，不管怎样，我将z-index设置为auto，它似乎正在工作，但不知道这是否是最好的解决方案，因此我欢迎任何其他可能的解决方案。恐怕问题出在您的HTML上。您应该将lightbox容器作为body标记的子级放在content div之外

例如：

<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分配给上面的所有内容，并使用外部样式表。

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

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

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

将其添加到创建lightbox的函数中，它将它们添加为主体中的最后一个分区子项，这意味着该子项自然出现在所有其他div的顶部，但我想您也可以为此设置一个固定的z索引。

---

我意识到这对专业人士来说可能是非常明显的，但我与之斗争过，所以可能其他正在与限制性模板和CMS系统作斗争的人会很感激这些信息。

你不能“浮在某个东西上”，这不是浮球的工作方式。你完全可以把东西放在你想去的任何地方好吧，我的意思是，在这个意义上，透明的背景比其他任何东西都重要。。。如果我把位置设置为绝对值，它只包含在那个部分，而不是整个页面。哦，你不是在谈论位置，你在谈论z指数，你想把它带到他们面前吗？使用z-indexeyah！z-index无法处理设置了特定值的同级。不过，将z-index设置为auto似乎是跨浏览器工作。将

z-index

设置为元素上的数字而不实际定位它不会有任何效果。设置

z-index:auto

将具有相同的效果。你是如何定位这些盒子的？是的，这就是问题所在。我不能这样做，因为它是Joomla的一个自包含组件，它将从该组件输出的所有内容放在模板的一个分区中，菜单在另一个分区中，模板在一个限制性框架（T3框架）上，所以我不能只在html中添加一个div。也许我需要更改JS，将背景div直接附加到html正文中？不过还是要谢谢你提供的信息。我想我会在这个问题上再努力一点。