絕對定位圖像時會導致它後面的所有內容重疊

我使用Twitter的引導，我有以下代碼：絕對定位圖像時會導致它後面的所有內容重疊

<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之後的所有內容都與其重疊。下面是截圖給你看結果：

enter image description here

它是什麼，我做錯了什麼？

感謝

來源

2014-07-07 user3666936

應用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; 
}

來源

2014-07-07 08:06:20

我試過了，結果如下：http://imgur.com/OhuMh8Y 我使用的針是紅色的，而不是粉紅色的。現在它幾乎隱藏在它下面的圖片後面，你可以看到它的提示。 – user3666936

不幸的是，該網站被阻止在我的網絡中......因爲我們無法檢查圖像，所以沒有太大的區別......你能提供一個在線鏈接，或者一個演示例如[jsfiddle]（http://jsfiddle.net）證明這一點..？ –

@ user3666936我想我明白了，檢查更新後的答案。 –

如果您使用z-index會發生什麼：99999;在de css

來源

2014-07-07 08:07:08 marcel

絕對定位圖像時會導致它後面的所有內容重疊

回答

相關問題