是否有可能使子部門在所有其他部門之上浮動，包括z-index設置高於父部門的部門？

對不起，如果這個問題已被問到，但我沒有搜索，找不到它。基本上，我的頁面中有一個下拉菜單，通常需要顯示在主要內容的頂部。但是在那個內容中是一個燈箱類型的東西，需要浮動在上面。是否有可能使子部門在所有其他部門之上浮動，包括z-index設置高於父部門的部門？

所以代碼是一樣的東西：

<div style="z-index:2"> 
    Drop Menu here 
</div> 
<div style="z-index:1"> 
    Content Here... 
    <a href="#">Lightbox button here</a> 
    <div> 
     Lightbox content (hidden initially) 
    </div> 
    <div> 
     Lightbox background (hidden initially) 
    </div> 
</div>

所以我現在遇到的問題是，如果我嘗試設置燈箱背景，它不重寫，由於其父菜單高的z-index比兄弟菜單分區低z-索引。如果我將內容容器設置爲更高級別，則下拉不再出現在內容頂部，因此不可點擊。我知道這可能是我在這裏錯過的一件顯而易見的事情，或者我使用的lightbox插件不是很好或什麼？我正在使用joomla CMS，所以我受限於我可以創建燈箱部門的地方。

否則，我認爲的其他選項是將菜單上的z-index設置爲子分區（實際菜單），但問題是它是一個框架系統，所以我需要從基礎中刪除z-index模板，那麼它會被一個更新覆蓋，除非有一個z-index命令將其設置爲「忽略」或什麼？

好吧沒關係，我將z-index設置爲auto，它似乎在工作，不知道這是否是最好的解決方案，所以我會歡迎任何其他可能的解決方案。

來源

2012-11-14 user1770717

你不能「漂浮在某物之上」，這不是浮動的工作方式。你可以絕對定位一些東西去你想去的地方，雖然 – Andy

好吧，我的意思是說，透明背景是所有其他的東西......如果我把位置設置爲絕對的，它只包含在該分區中，而不是傳播到整個頁面 – user1770717

哦，你不是在談論職位，你在談論Z-index，你想把它帶到他們面前？使用z-index – Andy

恐怕這是您的HTML是問題所在。您應該將內容div之外的lightbox容器作爲body標籤的子項。

例子：

<div style="z-index:2"> 
    Drop Menu here 
</div> 
<div style="z-index:1"> 
    Content Here... 
    <a href="#">Lightbox button here</a> 
</div> 

<div style="z-index:101"> 
    Lightbox content (hidden initially) 
</div> 
<div style="z-index:100"> 
    Lightbox background (hidden initially) 
</div>

注意：您當然應該給ID的上述所有替代和使用外部樣式表。

來源

2012-11-16 03:15:41 enzipher

是的，這是問題。我無法做到這一點，因爲它是Joomla的一個獨立組件，它將所有輸出的內容放到模板的一個分區中，菜單位於另一個分區，模板位於限制性框架（T3框架）上，所以我不能只添加一個div到html。也許我需要更改JS以將背景div直接附加到html body？但是，無論如何要感謝這些信息。猜猜我會在這一點上磨一點。 – user1770717

好吧所以它完美的工作的唯一方法是使用jquery將分割附加到身體。所以在我的燈箱腳本中我加入了：

jQuery('body').append(modalBG); 
jQuery('body').append(modal);

其中模式和模式BG分別是彈出內容和背景的div。

將此添加到創建燈箱的函數中，它將它們添加爲身體中的最後一個子節點，這意味着自然出現在所有其他div上，但是我想你可以爲此設置一個固定的z-index以及。我意識到這可能是專業人士顯而易見的事情，但我爲此付出了努力，所以也許其他人正在與限制性模板和CMS系統苦苦掙扎，他們會欣賞這些信息。

來源

2012-11-16 13:27:20 user1770717

是否有可能使子部門在所有其他部門之上浮動，包括z-index設置高於父部門的部門？

回答

相關問題