Html 如何使一个div与其他div重叠？

搜索栏下方的内容将在用户输入某些文本后显示。目前的风格是我的目标

但是，当我显示搜索结果时，它会在搜索栏后面推动容器，如我的图片所示：

我该怎么做才能让搜索结果显示出来，并在不向下推其他元素的情况下重叠它下面的所有内容

这是我的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>

使用CSS的。与相对定位不同，绝对定位将项目从文档流中移除（即防止其向下推其他内容）

请记住，绝对定位的对象是相对于其最近的父对象定位的，因此绝对定位的项目所在的容器（在您的情况下）应设置为

position:relative

关于各种定位的信息：
将
位置：绝对
交给你的
.item
分区。这样写：

 .item {
 position:absolute;
}

 .item {
 position:absolute;
}