Html 如何使 Div 出现在屏幕上的所有其他内容之上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18729338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a Div appear on top of everything else on the screen?
提问by jordan
I have the following popup:
我有以下弹出窗口：
But when i move this popup up to appear over the map, it gets hidden:
但是当我将此弹出窗口向上移动以显示在地图上时，它会被隐藏：
How to force something to be the top most, always displayed object on screen?
如何强制某些东西成为屏幕上最顶部、始终显示的对象？
I have tried setting the z-index on my CSS property sheet, but this did not work.
我曾尝试在我的 CSS 属性表上设置 z-index，但这不起作用。
Is there some HTML/CSS property i can set so that the popup, which is a DIV, actually always sets on top of everything else?
是否有一些我可以设置的 HTML/CSS 属性，以便作为 DIV 的弹出窗口实际上始终设置在其他所有内容之上？
回答by GotBatteries
z-indexis not that simple friend. It doesn't actually matter if you put z-index:999999999999..... But it matters WHEN you gave it that z-index. Different dom-elements take precedence over each other as well.
z-index不是那么简单的朋友。如果你把z-index:999999999999.....实际上并不重要，但重要的是当你给它的时候z-index。不同的 dom 元素也优先于彼此。
I did one solution where I used jQuery to modify the elements css, and gave it the z-indexonly when I needed the element to be on top. That way we can be sure that the z-indexof this item has been given last and the index will be noted. This one requires some action to be handled though, but in your case it seems to be possible.
我做了一个解决方案，我使用 jQuery 修改元素 css，并z-index在我需要元素位于顶部时才给它一个。这样我们就可以确保z-index最后给出了这个项目的索引，并且索引会被记录下来。不过，这需要处理一些操作，但在您的情况下似乎是可能的。
Not sure if this works, but you could try giving the !importantparameter too:
不确定这是否有效，但您也可以尝试提供!important参数：
#desired_element { z-index: 99 !important; }
Edit:Adding a quote from the link for quick clarification:
编辑：从链接中添加引用以进行快速说明：
First of all, z-index only works on positioned elements. If you try to set a z-index on an element with no position specified, it will do nothing. Secondly, z-index values can create stacking contexts, and now suddenly what seemed simple just got a lot more complicated.
首先，z-index 仅适用于定位元素。如果您尝试在未指定位置的元素上设置 z-index，它将什么也不做。其次，z-index 值可以创建堆叠上下文，现在看起来简单的事情突然变得复杂了很多。
Adding the z-index for the element via jQuery, gives the element different stacking context, and thus it tends to work. I do not recommend this, but try to keep the html and css in a such order that all elements are predictable.
通过 jQuery 为元素添加 z-index，为元素提供不同的堆叠上下文，因此它倾向于工作。我不建议这样做，但尽量将 html 和 css 保持在所有元素都是可预测的顺序。
The provided link is a must read. Stacking order etc. of html elements was something I was not aware as a newbie coder and that article cleared it for me pretty good.
提供的链接是必读的。html 元素的堆叠顺序等是我作为新手编码员不知道的事情，那篇文章对我来说很好地清除了它。
Reference philipwalton.com
回答by Hugo Sousa
Are you using position: relative?
你在用position: relative吗？
Try to set position: relativeand then z-index because you want this div has a z-index in relation with other div.
尝试设置position: relative然后设置z-index，因为您希望这个 div 与其他 div 有一个 z-index。
By the way, your browser is important to check if it working or not. Neither IE or Firefox is a good one.
顺便说一句，您的浏览器对于检查它是否有效很重要。IE 或 Firefox 都不是好东西。
回答by Paul G
Try setting position to absolute, ie.
尝试将位置设置为绝对，即。
#yourDiv{
position: absolute;
z-index: 10;
};
回答by Jason
Set the DIV's z-index to one larger than the other DIVs. You'll also need to make sure the DIV has a positionother than staticset on it, too.
将 DIV 的 z-index 设置为比其他 DIV 大的一个。您还需要确保 DIV 上也有position其他static设置。
CSS:
CSS：
#someDiv {
z-index:9;
}
Read more here: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
在此处阅读更多信息：http: //coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
回答by Phaneendra Charyulu Kanduri
you should use position:fixedto make z-indexvalues to apply to your div
你应该position:fixed用来使z-index值适用于你的 div
回答by freedeveloper
One form to do this is insert the panel that you want to expand inside a DIV setted as relative: let show you:
执行此操作的一种形式是在设置为相对的 DIV 中插入要展开的面板：让您展示：
<div style="position:relative">
<div style="position:absolute; z-index: 1000;">
your code
</div>
<div>
You use the first div to position the inner content in a specific area inside your page and the second absolute should be referred to the container (because is relative) The z-index in this case is referred also to container and if it higher that the container should be at top. You can put the style in a css class and change the size of the absolute div to expand it on hover or another action that you want to control.
您使用第一个 div 将内部内容定位在页面内的特定区域，第二个绝对值应引用容器（因为是相对的）在这种情况下，z-index 也称为容器，如果它高于容器应该在顶部。您可以将样式放在 css 类中并更改绝对 div 的大小以在悬停或您想要控制的其他操作时扩展它。
I hope that this help
我希望这有帮助
回答by Faisal Ameer
dropdowns always show up on top, only solution for this problem is to hide dropdowns when image is displayed (display:block or visibility:visibile) and show them when image hidden (display:none or visibility:hidden)
下拉总是显示在顶部，这个问题的唯一解决方案是在显示图像时隐藏下拉列表（显示：块或可见性：可见）并在图像隐藏时显示它们（显示：无或可见性：隐藏）
