Клуб API Карт

Наложение блока div на блок с картой

Пост в архиве.

Здравтсвуйте.

Есть блок с картой. Нужно наложить на этот блок с картой другой блок.

Разметка HTML:

<!DOCTYPE html>
<html>
  <head>

    // --- //
  </head>
  <body onload="initMap()">
    <div id="YMapsID"></div>
    <div id="b2"></div>
  </body>
</html>

CSS:

#YMapsID{
  width: 700px;
  height: 600px;
}
#b2{
  width: 200px;
  height: 600px;
  background: #f00;
}

JavaScript:

function initMap()
{
  var map=new YMaps.Map(document.getElementById("YMapsID"))
  map.setCenter(new YMaps.GeoPoint(35.20724,45.059185), 10);
}

Ссылка

Красный блок должен быть наложен на блок с картой, как на скриншоте:

То есть нужно, чтобы красный блок был ПОВЕРХ блока карты. Подскажите, пожалуйста, как можно это сделать. Пробовал через относительное позиционирование в стилях - не получилось. Красный блок остался на прежнем месте.

4 комментария

Это можно сделать используя интерфейс контролов

Можно сделать так:

#b2{
  width: 200px;
  height: 600px;
  background: #f00;
}

Заменить на:

#b2{
  width: 200px;
  height: 600px;
  background: #f00;
  position:absolute;
  top:0;

  left:0;
}

И оба блока засунуть в один оборачивающий div:


 
 

...

#container {
  width:700px;
  height:600px;
  position:relative;
}

у красного блока z-index в css поставиьие например 100

Огромное спасибо за помощь!