固定的DIV顯示下方的元素

Question

我有一個固定的DIV，它位於頁面頂部，並且當用戶向下滾動頁面時，固定的DIV向下移動。 當用戶單擊固定的DIV時，它會切換並允許用戶上傳圖像。

我發現的問題是，如果我在下面有一個Google Map（DIV），它會通過Fixed 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

添加z-index: 101; 轉到您的div，然后將其flip到另一個div的頂部。

<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>

將div的z-index設置為始終高於其下方的div。 如果您使用Google地圖描述的div的z-index假設為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始終會顯示在頂部，因此您需要為翻轉 div添加大於100的z-index值（ 面板的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屬性的更多信息，請參考此內容。