Question

我有一个固定的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的顶部？

Answer 1

将if添加到您的div中，我{d} z-index: 101;将其放在另一个div的顶部。

flip

将div的z-index设置为总是高于你想要的那些。如果您使用谷歌地图描述的div的z-index为let，假设为1000，则将其他元素设置为高于1000，以便位于具有较低数字的设置之上。

Answer 2

听起来像更改CSS z-index属性会解决您的问题。

#flip { z-index: 100; }
#panel { z-index: 50; }

Answer 3

A。 z-index在某些情况下可能会达到很高的数字。高达2147483647（90000就足够了）。尝试将您想要的所有元素更改为非常高的数字，以丢弃这是问题。

B。切换（反转）两个div之间的顺序。

由于您没有提供HTML的其余部分，因此这是两个易于测试的解决方案。

Answer 4

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。

固定DIV显示下面的元素

4 个答案: