css - 如何使 Div 出现在屏幕上的所有其他内容之上？

Question

编辑以重新打开：

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

问题是：

是否有可能有一个 div 覆盖谷歌地图的一部分？

我有以下弹出窗口：

在此处输入图像描述

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

在此处输入图像描述

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

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

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

score 37 · Accepted Answer

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 元素的堆叠顺序等是我作为新手编码员不知道的事情，那篇文章对我来说很好。

score 11 · Accepted Answer

你在用position: relative吗？

尝试设置position: relative，然后设置 z-index，因为您希望此 div 具有与其他 div 相关的 z-index。

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

score 10 · Accepted Answer

10

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

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

于 2014-12-28T00:18:37.000 回答

score 6 · Accepted Answer

6

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

于 2015-12-23T19:01:56.887 回答

score 5 · Accepted Answer

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

CSS：

#someDiv {
    z-index:9; 
}

score 0 · Accepted Answer

执行此操作的一种形式是在设置为相对的 DIV 中插入要扩展的面板：让我向您展示：

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

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

我希望这有帮助

score -1 · Accepted Answer

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

7 回答 7