web-dev-qa-db-ja.com

要素を別の要素の上に配置する方法は？

メニューと検索ボックスがあります。メニュー項目と一緒に検索ボックスを配置したいと思います。しかし、私のメニューは、次のcssを使用する「custommenu」という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;
}

私は次のような別のファイルに検索ボックスを持っていますが：

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

以下をcssファイルに追加して、検索ボックスがメニューの一番上に表示されるようにしましたが、機能しませんでした

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

それでも、検索ボックスはメニューの後ろに隠れます。メニューに検索ボックスを入れたいのですが。どうすればいいのですか？

編集：これは検索ボックスを含む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; }

そして、これが現在の外観です（紫色のリンク-クイックアクセス、白いボックスはピンクの「カスタムメニュー」領域の後ろにある検索です。ピンクの領域に白いボックスを配置したいと思います。これはすべて内部にあります。 'ヘッダ'）

z-index issue o/p

htmlcsspositionz-index
9
ivn

@すべて

返信が遅くなってすみません。しかし、私は少しいじった後に解決策を見つけました。ヘッダーのz-indexをカスタムメニューよりも高い値に設定しました。私のヘッダーには検索ボックスが含まれているため、検索ボックスがメニューに表示されるようにするには、より高い値を指定する必要がありました。

コードは次のようになります

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

これにより、メニューの上にある検索ボックスが完全に整列しました。助けてくれたすべての人にもう一度感謝します。感謝します。

7
ivn

floatで試してみませんか？またはdisplay:block;
このコードを使用している場合は、次のようにcssを記述します。

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

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

0
Symeon Breen

z-indexには非静的な配置が必要ですが、コード例からは、z-indexとスタックしようとしている要素によって実際にどのタイプの配置が使用されているかが明確ではありません。

どちらの方法でも、要素の関連性に関して、要素に使用する必要のある配置のタイプを決定するのに役立つ可能性のある非常に便利なツールです。

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

0
brezanac