別の要素の上に要素を配置する方法はありますか？

Question

私はメニューと検索ボックスを持っています。私は検索ボックスをメニュー項目と一緒に置いておきたいと思います。

<div class="header"> 
    some code 
    <div class="quick-access"> 
     some code 
    <php echo $this->getChildHtml('topSearch') ?>; 
    </div> 
</div> 

：私はこのようになり、別のファイルに私の検索ボックスを持っているのに対し

#custommenu { 
    position:relative; 
    z-index:999; 
    font-size: 14px; 
    margin: 0 auto; 
    padding: 10px 16px; 
    width: 918px; 
    background-color: #FB0A51; 
    border-top-left-radius: 10px 10px; 
    -moz-border-top-left-radius: 10px 10px; 
    border-top-right-radius: 10px 10px; 
    -moz-border-top-right-radius: 10px 10px; 
} 

：しかし、私のメニューには、次のCSSを使用しています「custommenu」と呼ばれるのdiv内の別のファイルに建設されています

私は検索ボックスがメニューの一番上に来るが、それは

.header .form-search { 
    position:absolute; 
    right:29px; 
    z-index:1000; 
    top: 80px; 
    width:315px; 
    height:30px; 
    padding:1px 0 0 16px; 
} 

それでも検索ボックスがメニューの後ろに隠れてますがうまくいきませんでしたように、CSSファイルに以下を追加してみました。私は検索ボックスをメニューにしたいと思っています。どうすればいいのですか？

編集：ここでは検索ボックスを含むdivののCSSは、だ

.header { width:930px; margin:0 auto; padding:10px; text-align:right; position:relative; z-index:10; border-top:3px solid #3C3C42;} 
.header .quick-access { float:right; width:600px;margin-top:-125px; padding:28px 10px 0 0; } 
.header .form-search { position:relative; top: 100px;left: 300px; z-index:9999; width:315px; height:30px; padding:1px 0 0 16px; } 

そして、これは、それが今どのように見えるかである、（紫のリンク - 迅速なアクセス、白いボックスが後ろに起こっている検索ですピンクの「custommenu」エリア。私はピンクの部分に白いボックスを持っていると思います。そして、これのすべては内部「ヘッダ」です）

Answer 1

@all非常に遅れて返信用

申し訳ありません。しかし、ちょっとした手間を経て解決策を見つけました。私は私のカスタムメニューよりも高い値に私のヘッダーのZ-インデックスを設定しました。私のヘッダーには検索ボックスが含まれていたので、検索ボックスがメニューの上に来るためにはより高い価値が必要でした。

コードは次のようになり、今

.header{ position: relative; z-index: 4000; } 
.header search { position: relative; z-index: 99999; } 
.custommenu { position: relative; z-index: 1000 ;} 

これは完全に私のメニュー整列の上に私の検索ボックスを得ました。助けてくれたすべての人に再び感謝します。感謝します。

Answer 2

floatで試してみてください？私はこのコードを使用していた場合はdisplay:block;
か、私はこのようなCSSを記述します。

position:relative; 
left:some value; 
top:some value; 
Z-index: -999 

Answer 3

メニューの後ろに表示される検索ボックスは、zインデックスの問題のように聞こえる - おそらくメニューのコンテナが高いです検索ボックスのz-indexを999999に変更してみてください。

Answer 4

z-indexは非静的な配置が必要ですが、実際にどのタイプの配置が実際に使用されているかは明確ではありませんz-indexと積み重ねる。

どちらの方法であっても、どのような位置付けを要素に関連させるべきかを判断するのに役立つ非常に有用なツールです。

http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp