如何将元素放在另一个元素的顶部？

Question

我有一个菜单和一个搜索框。我想把搜索框和菜单项一起放。但我的菜单正在一个名为'custommenu'的div中的不同文件中构建，该文件使用以下css：

#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; }

这就是它现在的样子，（紫色链接 - 快速访问，白盒子是粉红色'custommenu'区域后面的搜索。我想在粉红色区域有白色盒子。所有的这是'标题'）

Answer 1

@all

很抱歉很晚才回复。但是经过一些小小的调整我找到了解决方案。我将标题的z-index设置为比我的custommenu更高的值。由于我的标题包含搜索框，因此搜索框需要有更高的值才能通过菜单。

代码现在看起来像这样

.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索引，尝试将搜索框z-index更改为999999。

Answer 4

z-index需要非静态定位，但是从您的代码示例中不清楚您尝试与z-index堆叠的元素实际使用了哪种类型的定位。

这里的任何一种方式都是一个非常有用的工具，可以帮助您确定您的元素必须使用哪种类型的定位。

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