Html 如何使一个div与其他div重叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10089514/
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 make a div overlap other divs?
提问by Only Bolivian Here
The contents below the search bar are meant to be shown after the users enter some text. Currently the style is down to what I'm aiming for.
搜索栏下方的内容旨在在用户输入一些文本后显示。目前，风格取决于我的目标。
However when I display the search results, it pushes the container following the search bar, as illustrated by my picture:
但是，当我显示搜索结果时，它会在搜索栏之后推动容器，如我的图片所示：
What can I do that the search results display and just overlap everything below it withoutpushing other elements downwards?
我该怎么做才能让搜索结果显示出来并且只重叠它下面的所有内容而不向下推动其他元素？
Here is my HTML:
这是我的 HTML：
<div id="search-bar" class="box">
<h1 class="horizontal-header">SEARCH THE DATABASE</h1>
<div id="search-wrapper">
<input name="query" id="name" class="big-search" placeholder="champion, item, spells..." />
<div id="search-results">
<a href="#">
<div class="item">
<img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" />
<div class="info">
<p class="name">Jax</p>
<p class="description">Champion</p>
</div>
</div>
</a>
<a href="#">
<div class="item">
<img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" />
<div class="info">
<p class="name">Jax</p>
<p class="description">Champion</p>
</div>
</div>
</a>
<a href="#">
<div class="item">
<img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" />
<div class="info">
<p class="name">Jax</p>
<p class="description">Champion</p>
</div>
</div>
</a>
</div>
</div>
</div>
And my CSS (written with LESS):
还有我的 CSS（用 LESS 编写）：
#search-bar {
width: 636px;
height: 35px;
#search-wrapper {
float:left;
margin-left: 13px;
#search-results {
z-index:999;
position:relative;
a {
display:block;
.item:hover {
background-color:#282828;
}
.item {
overflow: hidden;
background-color: #171717;
padding: 2px;
cursor:pointer;
margin-bottom:1px;
img {
float: left;
width: 35px;
}
.info {
float: left;
margin-left: 8px;
.name {
color: white;
margin: 0;
}
.description {
color: white;
margin: 0;
}
}
}
}
}
}
}
回答by Dave
Use CSS's Absolute Positioning. Unlike Relative Positioning, Absolute Positioning removes the item from the flow of the document (ie keeping it from pushing other things down.)
使用 CSS 的绝对定位。与相对定位不同，绝对定位将项目从文档流中移除（即防止它向下推其他东西。）
Just remember, something that's absolutely positioned is positioned relative to it's nearest positioned parent - so whatever container the absolute positioned items are in (in your case) should be set to position:relative;
请记住，绝对定位的东西是相对于它最近定位的父项定位的 - 所以绝对定位的项目所在的任何容器（在你的情况下）都应该设置为 position:relative;
Info on all kinds of positioning: http://www.w3schools.com/css/css_positioning.asp
回答by sandeep
Give position:absoluteto your .itemDIV. Write like this:
给position:absolute你的.itemDIV。像这样写：
.item {
position:absolute;
}
