如何让Div出现在屏幕上的其他内容之上?

[英]How to make a Div appear on top of everything else on the screen?


I have the following popup:

我有以下弹出窗口:

enter image description here

But when i move this popup up to appear over the map, it gets hidden:

但是,当我将此弹出窗口移动到地图上时,它会被隐藏:

enter image description here

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,实际上总是设置在其他一切之上?

7 个解决方案

#1


19  

z-index is 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-index only when I needed the element to be on top. That way we can be sure that the z-index of 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 !important parameter too:

不确定这是否有效,但您也可以尝试给出!important参数:

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

Reference philipwalton.com

参考philipwalton.com

#2


7  

Are you using position: relative?

你在使用职位:亲戚吗?

Try to set position: relative and 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都不是一个好的。

#3


5  

Set the DIV's z-index to one larger than the other DIVs. You'll also need to make sure the DIV has a position other than static set on it, too.

将DIV的z-index设置为大于其他DIV的索引。您还需要确保DIV上还有一个静态设置位置。

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/

#4


4  

Try setting position to absolute, ie.

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

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

#5


3  

you should use position:fixed to make z-index values to apply to your div

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

#6


1  

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

我希望这有帮助

#7


-2  

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)

下拉列表始终显示在最顶层,此问题的唯一解决方案是在显示图像时隐藏下拉列表(显示:块或可见性:可见性)并在隐藏图像时显示它们(显示:无或可见性:隐藏)


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2013/09/10/fdf26341505471a358cfbeaf4e77e202.html



 
© 2014-2018 ITdaan.com 粤ICP备14056181号