下拉導航子菜單呈現在其他元素後面

我的導航欄中的子菜單呈現在主內容後面。更具體地說，我有一個導航組件正好在另一個包含h1元素的組件之上。導航欄中的子菜單明顯位於主體組件中h1元素的後面（因爲沒有背景）。它也被頁腳隱藏起來。下拉導航子菜單呈現在其他元素後面

在主應用程序組件，模板看起來是這樣的：

<nova-header></nova-header> 
<nova-navigation [categories]="categories"></nova-navigation> 
<router-outlet></router-outlet> 
<nova-footer [categories]="categories"></nova-footer>

什麼奇怪的是，我複製粘貼我的代碼到的jsfiddle，你可以看到我已經分開nova-navigation模板HTML和小提琴中的主體組件HTML，但是問題消失了，子菜單正確顯示。我是Angular的新手，所以我認爲我錯過了Angular的工作原理。

這裏有一個鏈接，說的jsfiddle：https://jsfiddle.net/jonnylin13/nwxyd8j8/

我試過的z-index和溢出已經

編輯**問題一定是與本地環境，我創建了一個plnkr和問題不在那裏。 http://plnkr.co/edit/Pzzt6C4C9OrAvil50yqT?p=preview

來源

2017-07-07 jonooo

嘗試增加css中的z-index值爲菜單 –

我已經嘗試過，幾乎所有的divs都出於絕望 – jonooo

不幸的是，我們無法真正地在沒有[mcve]的情況下進行調試。 – TylerH

由於我不能評論，我會幫你回答。我可以建議你的Z指數。但是你必須記住，z-index需要屬性位置才能工作。

我希望這會幫助你，讓我知道！

來源

2017-07-07 15:53:23

我還沒有使用Angular，但是我有類似的問題：React：框架添加元素到DOM中以處理內容（如包裝動畫等）。這些元素會影響CSS的定位。

當您檢查瀏覽器中的代碼時，是否注意到包含您的元素的任何額外的<span>或<div>？

如果是這樣，您可能需要使用選擇器.content > span來定義額外的CSS規則來設置它們的position，因爲z-index only works on positioned elements。

來源

2017-07-07 16:06:50 twekz

下拉導航子菜單呈現在其他元素後面

回答

相關問題