Блог

Я использую 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;
}
  

Мне нужно поместить pin-код поверх карты. Итак, я расположил карту абсолютно, а булавку относительно.
Проблема в том, что когда я помещаю #map в абсолютное позиционирование все содержимое, которое следует за родительским div, перекрывает его. Вот скриншот, чтобы показать вам результат:

Что я делаю не так?

Спасибо

Что произойдет, если вы используете z-index: 99999; в de css

Применение position:absolute выводит элемент из обычного потока, следовательно, когда вы абсолютно позиционируете карту, статические элементы, следующие за ним, будут действовать так, как будто карты там вообще нет.

Элементы с абсолютным позиционированием располагаются относительно относительного родительского элемента. В текущей разметке #map является не родительским элементом pin-кода, а родственным, поэтому добавьте 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;
}