html - 固定 DIV 显示下方的元素

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

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

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