Question

js/css如何将弹出的图片放在网页的最上层？

如题，我在某一个页面做了一个弹出框，这个弹出框展示的是一些图片预览，点击其中某一个图片就弹出一个对应的大图，现在已经做到了弹出这个大图，但是弹出的图片却在原先的弹出框底下，请问如何将这个弹出的大图设置在最上层呢？希望不吝赐教，谢谢。

Answer 1

1．在同一个div中，编写如下图所示的一段代码，并在这段代码中设置dive的宽度和高度，以便文本具有特定的范围。

2．找到背景，如下图所示，添加背景后的图像作为背景图案。

3．在后台添加url（）。为了连接图像，在url中写入背景图像的路径。

4．你可以把你最喜欢的图片根据你的个人喜好。你必须把正确的路径写在这里。

5．这样，保存后的文本将覆盖在图片的顶部。

Answer 2

1. 在html文档中做一个装弹出图片的容器

   
   

2. <div id="tanchu_img"></div>

3. 在css文档中将该容器的position设置为absolute，以及足够大的z-index并进行其他必要的属性设置。

   如：

   
   

4. #tanchu_img{position:absolute;left:50%;top:50%；z-index：9999;}

5. 如果你只想想显示一张图不变的图片，只要使用js控制#tanchu_img的display就可以控制图片的显示与隐藏。如果你有多张的图片，那么在使用js控制图片显示之前，要先使用js更改img标签的src。

6. 结束。
   

    

Answer 3

图片对象.style.zIndex="20000";
或者…… style="zIndex:20000;"
只要把想放在最顶层的对象的 zIndex 设为比其他的都高就行

Answer 4

楼主问的这个问题说明楼主应该接触前端有段时间了，加z-index值这种小白方案应该有试过了，
如果z-index值没有作用，那么很有可能是浮动、其它定位等因素引起的不兼容问题。

解决方案：在其中对应元素标签相关的父标签或是祖先标签设置z-index，
就拿楼主的问题作例子来说：
我想楼主的做法应该是
1，解决弹出框定位。在基础页面上position:relative;然后在弹出框上position:absolute;并加了z-index。
2，解决弹出大图定位。在弹出框中相应位置position:relative;然后在弹出大图上position:absolute;并加了z-index。
这时问题出现，不管2中的z-index比1中的z-index大多少都不管用对吧？
那么下面是按我给的方案来做：
1，解决弹出框定位。
a、在基础页面上position:relative;并加上z-index
b、然后在弹出框上position:absolute;并加上z-index
2，解决弹出大图定位。
c、在弹出框中相应位置position:relative;并加上z-index
d、然后在弹出大图上position:absolute;并加上z-index
记得保证z-index(a中的)<z-index(b中的)<=z-index(c中的)<z-index(d中的)就OK了 。
（或许你是用的position:fixed，那思路是一样的，在相应的父标签或祖先标签加上z-index就可以了）

Answer 5

<style type="text/css">
<!--
#div1{
position:absolute;
left:329px;
top:132px;
width:367px;
height:381px;
z-index:1;
}
-->
</style>
<div id="div1"></div>