div中的绝对定位图像，导致其后面的所有内容重叠

Question

我正在使用twitter bootstrap，我有以下代码：

<div class="row clearfix">
    <div class="col-md-12 column">
        <img src="img/map.jpg" id="map" />
        <a id="modal-786791" href="#modal-container-786791" role="button" class="btn" data-toggle="modal"><img src="img/pin.png"/></a> 
    </div>
</div>

CSS：

#map{
    position: absolute;
}

#modal-786791 img{
    position:relative;
}

我需要将图钉放在地图上方。所以我绝对定位地图和相对位置。 问题是当我将#map置于绝对定位时，父div之后的所有内容都与它重叠。这是一个屏幕截图，显示结果：

我做错了什么？

由于

Answer 1

应用position:absolute会使元素脱离正常流量，因此当您绝对定位地图时，跟随它的静态元素将会像地图一样根本就没有。

绝对定位的元素相对于相对父级定位。在当前标记中，#map不是引脚的父级，而是兄弟级，因此向包含它的id添加<div>，例如

HTML

<div class="row clearfix">
<div id='mapContainer' class="col-md-12 column">
    <img src="img/map.jpg" id="map" />
    <a id="modal-786791" href="#modal-container-786791" role="button" class="btn" data-toggle="modal"><img src="img/pin.png"/></a> 
</div>

然后你可以将容器定位为相对容器（以便它保持正常流程）并将其作为绝对引脚。

#mapContainer{
 position:relative;
}
#modal-786791 img{
 position: absolute;
}

Answer 2

如果使用z-index会发生什么：99999; in de css