Html 如何将一个元素放置在另一个元素的顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9927295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to position an element on top of another element?
提问by ivn
I have a menu and a search box. I would like to put the search box along with menu items. But my menu is being built in a different file in a div called 'custommenu' which uses the following css:
我有一个菜单和一个搜索框。我想把搜索框和菜单项放在一起。但是我的菜单是在名为“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;
}
Whereas I have my search box in a separate file which looks like this:
而我的搜索框位于一个单独的文件中，如下所示：
<div class="header">
some code
<div class="quick-access">
some code
<php echo $this->getChildHtml('topSearch') ?>;
</div>
</div>
I tried adding the following to the css file so that the search box comes on top of the menu but it did not work
我尝试将以下内容添加到 css 文件中，以便搜索框位于菜单顶部，但它不起作用
.header .form-search {
position:absolute;
right:29px;
z-index:1000;
top: 80px;
width:315px;
height:30px;
padding:1px 0 0 16px;
}
Still the search box gets hidden behind the menu. I would like to have the search box n the menu. How do i do it?
搜索框仍然隐藏在菜单后面。我想在菜单中有搜索框。我该怎么做？
EDIT: Here's the css of the div's which contains the search box,
编辑：这是包含搜索框的 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; }
And this is how it looks right now, (purple links - quick access, white box is search which is going behind the pink 'custommenu' area. I would like to have the white box on the pink area. And all of this is inside 'header')
这就是它现在的样子，（紫色链接 - 快速访问，白色框是搜索，它位于粉色“自定义菜单”区域后面。我想要粉色区域上的白色框。所有这些都在里面'标题'）
采纳答案by ivn
@all
@全部
Sorry for replying very late. But I found the solution after a little bit of fiddling. I set the z-index of my header to a higher value than my custommenu. Since my header contains the search box it needed to have a higher value for the search box to come over the menu.
抱歉回复得太晚了。但我经过一番摆弄后找到了解决方案。我将标题的 z-index 设置为比自定义菜单更高的值。由于我的标题包含搜索框，因此搜索框需要具有更高的值才能进入菜单。
The code looks like this now
代码现在看起来像这样
.header{ position: relative; z-index: 4000; }
.header search { position: relative; z-index: 99999; }
.custommenu { position: relative; z-index: 1000 ;}
This perfectly got my search box on top of my menu aligned. Thanks again for all those who helped. Appreciate it.
这完美地使我的菜单顶部的搜索框对齐。再次感谢所有帮助过的人。欣赏它。
回答by SR query
Try with float? or display:block;
If I was using this code, I would write the css like this:
试试看float？或者，display:block;
如果我使用此代码，我会像这样编写 css：
position:relative;
left:some value;
top:some value;
Z-index: -999
回答by Symeon Breen
The search box appearing behind the menu sounds like a z-index issue - perhaps the container of the menu has a higher z-index to the search box, try changing the searchbox z-index to 999999.
出现在菜单后面的搜索框听起来像是 z-index 问题——也许菜单的容器对搜索框有更高的 z-index，尝试将搜索框 z-index 更改为 999999。
回答by brezanac
z-indexrequires non-static positioning however it is not clear from your code examples which type of positioning is actually used by the elements you are trying to stack with z-index.
z-index需要非静态定位，但是从您的代码示例中并不清楚您尝试与之堆叠的元素实际使用哪种类型的定位z-index。
Either way here is a very helpful tool which might help you determine which type of positioning you have to use for your elements in regards to how they relate.
无论哪种方式，这里都是一个非常有用的工具，它可以帮助您确定必须对元素使用哪种类型的定位，以了解它们的相关性。
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
