如何使 Div 出现在屏幕上的所有其他内容之上？ [关闭]答案

【问题标题】：How to make a Div appear on top of everything else on the screen? [closed]如何使 Div 出现在屏幕上的所有其他内容之上？ [关闭]
【发布时间】：2013-09-10 21:49:51
【问题描述】：

编辑以重新打开：

在谷歌地图上定位元素似乎很困难。使用 z-index 并不能解决下面描述的问题：即使使用高 z-index，Google 地图也会保持在某些其他元素之上。

问题是：

是否可以让 div 覆盖谷歌地图的一部分？

我有以下弹出窗口：

但是当我将此弹出窗口向上移动以显示在地图上时，它会被隐藏：

如何强制某物成为屏幕上最顶部、始终显示的对象？

我尝试在我的 CSS 属性表上设置 z-index，但这不起作用。

我是否可以设置一些 HTML/CSS 属性，以便作为 DIV 的弹出窗口实际上总是设置在其他所有内容之上？

【问题讨论】：

地图的 z-index 和弹出窗口的 z-index 是多少？
@SiKni8 MAP:-webkit-transform: translateZ(0);弹出窗口：z-index：100000；
每个浏览器都会出现这种情况？
@SiKni8 只试过 chrome 哈哈
很多人抱怨代码在不同的浏览器中不能正常工作。并不是说您的代码是错误的，而是不同的浏览器对某些标记的解释不同。在 IE 和 FF 中尝试，让我们知道会发生什么。

标签： css html popup z-index

【解决方案1】：

z-index 不是那么简单的朋友。是否输入z-index:999999999999 并不重要，但重要的是您何时输入z-index。不同的 dom 元素也相互优先。

我做了一个解决方案，我使用 jQuery 修改元素 css，并仅在我需要元素位于顶部时才给它z-index。这样我们就可以确定这个项目的z-index 是最后给出的，并且索引会被记录下来。不过，这需要处理一些操作，但在您的情况下，这似乎是可能的。

不确定这是否有效，但您也可以尝试提供!important 参数：

#desired_element { z-index: 99 !important; }

编辑：从链接中添加引用以快速澄清：

首先，z-index 仅适用于定位元素。如果您尝试在未指定位置的元素上设置 z-index，它将什么也不做。其次，z-index 值可以创建堆叠上下文，现在看起来很简单的事情突然变得复杂了很多。

通过 jQuery 为元素添加 z-index，为元素提供不同的堆叠上下文，因此它往往会起作用。我不建议这样做，但请尽量保持 html 和 css 的顺序，以使所有元素都可预测。

提供的链接是必读的。 html 元素的堆叠顺序等是我作为新手编码员不知道的事情，那篇文章很好地为我清除了它。

参考philipwalton.com

【讨论】：

【解决方案2】：

你在使用position: relative吗？

尝试设置position: relative，然后设置z-index，因为你希望这个div与其他div有一个z-index。

顺便说一句，您的浏览器检查它是否工作很重要。 IE 和 Firefox 都不是好的。

【讨论】：

相对位置和 z 索引设置为 9999999999999999999999999999999999999999999999999999。在 chrome 中。仍然隐藏在地图后面
您找到解决方案了吗？在 Chrome 中遇到同样的问题
@DivisionbyZero - 我从来没有为我的具体实现找到合适的解决方案，但我给了 GotBatteries 的“正确答案”。看看吧，希望对你有帮助。

【解决方案3】：

尝试将位置设置为绝对，即。

#yourDiv{
    position: absolute;
    z-index: 10;
};

【讨论】：

【解决方案4】：

您应该使用position:fixed 将z-index 值应用于您的div

【讨论】：

不仅仅是位置：固定，而是所有位置。只是要清楚
我说过任何 div 都可以出现在任何深度
所有职位，除了默认的static。为了更清楚！

【解决方案5】：

将 DIV 的 z-index 设置为比其他 DIV 大一。您还需要确保 DIV 上还设置了 position 而不是 static。

CSS：

#someDiv {
    z-index:9; 
}

【讨论】：

相对位置和 z 索引设置为 9999999999999999999999999999999999999999999999999999。在 chrome 中。仍然隐藏在地图后面。
@jordan.peoples 尝试将 z-index 放在两个 div 中，但顶部的那个应该得到更高的那个
我也一样！相对位置和 z 索引设置为 999999999999999999999999999999999999999999999999999。在 chrome 中。仍然隐藏在地图后面。 @乔丹
@Chen-CN 我从来没有找到合适的解决方案 - 我们使用第三方开发的网站作为代码库，他们在编码方面很糟糕。最终我认为确定页面被分成两个窗格或窗口或其他东西，所以在一个部分中创建的任何东西都必须存在于那里 - 所以我们最终将这个代码放入垃圾箱并将弹出窗口作为地图的子项，或者类似的东西那

【解决方案6】：

执行此操作的一种形式是将要扩展的面板插入设置为相对的 DIV 中：让我告诉你：

<div style="position:relative">
  <div style="position:absolute; z-index: 1000;">
    your code
  </div>
</div>

您使用第一个 div 将内部内容定位在页面内的特定区域中，第二个绝对值应该引用容器（因为是相对的）在这种情况下 z-index 也引用容器，如果它高于容器应该在顶部。您可以将样式放在 CSS 类中，并更改绝对 div 的大小以在悬停或您想要控制的其他操作时扩展它。

希望对你有所帮助

【讨论】：

【解决方案7】：

下拉菜单总是显示在顶部，解决此问题的唯一方法是在显示图像时隐藏下拉菜单（display:block 或 visibility:visibile），并在图像隐藏时显示它们（display:none 或 visibility:hidden）

【讨论】：

你能不能 -1、z-index 或任何其他技术不能将下拉菜单保留在后台，唯一的方法是在你想显示某些内容时隐藏它们，