我有一个固定的DIV,它位于页面的顶部,当用户向下滚动页面时,固定的DIV向下移动。当用户点击固定的DIV时,它会切换并允许用户上传图像。
我发现的问题是,如果我有一个例子,下面的谷歌地图(DIV)通过固定DIV闪耀。
DIV固定
的示例<div id="flip" style="position: fixed; width: 98%;">CLICK TO ADD PHOTOS<br /><span style="font-size: 11px;">Expands to allow for uploading photo</span></div>
<div id="panel" style="position: fixed; margin-top: 35px;width: 98%; z-index: 100;"><iframe src="upload.aspx?id=<%Response.Write(Request.QueryString["id"]); %>&type=<%Response.Write (Request.QueryString["type"]); %>" style="overflow: scroll;height: 500px; border: 0px;" scrolling="no"></iframe></div>
如何阻止此固定DIV下面的任何DIV显示在固定DIV的顶部?
答案 0 :(得分:0)
将if
添加到您的div中,我{d} z-index: 101;
将其放在另一个div的顶部。
flip
将div的z-index设置为总是高于你想要的那些。如果您使用谷歌地图描述的div的z-index为let,假设为1000,则将其他元素设置为高于1000,以便位于具有较低数字的设置之上。
答案 1 :(得分:0)
听起来像更改CSS z-index属性会解决您的问题。
#flip { z-index: 100; }
#panel { z-index: 50; }
答案 2 :(得分:0)
A。 z-index在某些情况下可能会达到很高的数字。高达2147483647(90000就足够了)。尝试将您想要的所有元素更改为非常高的数字,以丢弃这是问题。
B。切换(反转)两个div之间的顺序。
由于您没有提供HTML的其余部分,因此这是两个易于测试的解决方案。
答案 3 :(得分:0)
z-index
CSS属性可以解决您的问题,z-index
属性值最高的div将始终显示在顶部,因此您需要为z-index值>翻转 div高于100 (面板&#39; s z-index
值)
<div id="flip" style="position: fixed; width: 98%; z-index: 101;">CLICK TO ADD PHOTOS<br /><span style="font-size: 11px;">Expands to allow for uploading photo</span></div>
<div id="panel" style="position: fixed; margin-top: 35px;width: 98%; z-index: 100;"><iframe src="upload.aspx?id=<%Response.Write(Request.QueryString["id"]); %>&type=<%Response.Write (Request.QueryString["type"]); %>" style="overflow: scroll;height: 500px; border: 0px;" scrolling="no"></iframe></div>
有关z-index
CSS属性的详细信息,请参阅this。