相対的に配置された要素を持つZ-インデックス

Question

私はCSSドロップダウンナビゲーションメニュー付きのWebページを持っています。私の問題は、ドロップダウンを表示させるためにメニューの上にマウスを移動すると、ページ内の他のすべてがドロップダウンの代わりにドロップダウンのスペースを作るために移動することです。マイナビリンクは、その要素のid「ヘッダ」と私のCSSでdiv要素であるが、このようになります：動いているページ内の要素の

#header { 
    width: 100%; 
    z-index: 100; 
    position: relative; 
} 

なしヘッダおよびそれらの非持た内ではありませんz-indexを指定します。誰かが私が間違っていることを教えてもらえますか？

Answer 1

あなたは、メニューボタンにカーソルを合わせると表示されるサブメニューにposition: absoluteを追加する必要があります。またhttp://www.htmldog.com/articles/suckerfish/dropdowns/

関連：

チュートリアルは、ここを参照してください私の理解からhttp://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

Answer 2

positionからabsoluteに変更し、親コンテナのpositionをrelativeにします。

それとも、反対方向に、#header内の別のコンテナを作成し、その中にすべてを詰め込みます。

重要なポイントは、内側の要素が絶対的に配置される必要がありますが、その親に対してです。したがって相対的な親の位置。