ドロップダウンナビゲーションサブメニューが他の要素のレンダリング

Question

ナビゲーションバーのサブメニューがメインコンテンツの背後に表示されています。具体的には、h1要素を含む別のコンポーネントのすぐ上にあるナビゲーションコンポーネントがあります。ナビゲーションバーのサブメニューは、本体コンポーネントのh1要素の後ろに表示されます（背景がないため）。それはまた、フッターによって隠されている。メインアプリのコンポーネントで

は、テンプレートは次のようになります。

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

何奇妙だが、私はあなたが私が離れてきた場所を見ることができますJSFiddle、に私のコードを、貼り付けコピーすることですノバナビゲーションテンプレートのHTMLと本体のコンポーネントHTMLがフィードバックされますが、問題はなくなり、サブメニューは正しくレンダリングされます。私はAngularを初めて使っているので、Angularがどのように動作するかについて何か不足していると思います。私はZインデックスとオーバーフローを試してみたhttps://jsfiddle.net/jonnylin13/nwxyd8j8/

すでに

EDIT私はplnkrを作成し、問題があるとして**問題は私のローカル環境である必要があります。ここでは

はJSFiddleが言っへのリンクですいない。 http://plnkr.co/edit/Pzzt6C4C9OrAvil50yqT?p=preview

Answer 1

私がコメントできないので、私はあなたの答えにお手伝いします。 私はあなたにZ-インデックスを提案することができます。 しかし、あなたは、z-indexが機能するにはプロパティの位置が必要であることを覚えておく必要があります。

私はこれがあなたに役立つことを願っています。

Answer 2

私はあまりアンギュラ使用していないが、私は同様の問題があったリアクト：フレームワークは、（ラップアニメーションなどのような）コンテンツを扱うためのDOMに要素を追加します。これらの要素は、CSSの配置を妨げます。

ブラウザでコードを調べると、要素がラップされた<span>または<div>がありますか？

z-index only works on positioned elementsのように、.content > spanのようなセレクタで余分なCSSルールを定義して、positionを設定する必要があります。