HTML и CSS 1

Как добавить фоновый блок поверх карты Яндекс API?

Недавно столкнулся с такой интересной задачей — нужно было на интерактивную карту наложить фоновый блок с контактами для связи. Очень долго мучался, но в итоге нашел решение. Может кому-нибудь когда-нибудь будет нужно, поэтому и пишу. Это будет небольшая заметочка.

Проблема с интерактивными картами Яндекса

В общем, при верстке одного шаблона мне нужно было в футер вставить интерактивную карту Яндекса. Не картинку, а иметь рабочую карту, по которой человек может что-то найти. Сама карта вставляется с помощью скрипта, я ее обернул блоком с уникальным идентификатором. Но далее предстала задача: как наложить блок с фоном на саму карту? Вы можете увидеть на этом скриншоте, как нужно было сделать:
фон на карту
Оранжевым прямоугольником я закрыл конфиденциальную информацию, но суть понятна. Нужно наложить полупрозрачный блок на саму карту. Казалось бы, какие проблемы, но не тут то было.

Что я только не пробовал. Сначала задал футера относительное позиционирование, а полупрозрачному блоку — абсолютное, но ничего не вышло. Также я экспериментировал со слоями, пытаясь карте задай слой ниже, чем блоку, но блок упорно не хотел появляться — интерактивная карта его перекрывала. Но в итоге я нашел решение.

Решение проблемы

Блоку нужно задать абсолютное позиционирование относительно всей страницы (body), а не футера. Также для убедительности я добавил z-index с большим значением. В итоге получилось так:

<div id="bg" style="position:absolute; left:0px; bottom:0px; z-index: 999; background: rgba(0, 0, 0, 0.5)">содержимое</div>

Итак, чтобы фоновый блок отобразился поверх карты, нужно сделать следующее:
Задать ему абсолютное позиционирование и координаты. При этом карта должна быть самым нижним элементом сайта, ниже не должно быть ничего. Это нужно для того, чтобы не морочиться с координатами.
Для убедительности задать номер слоя.

Все, теперь все работает, но с одной оговоркой. Интерактивная карта работает только в той области, где она не перекрывается блоком. На данный момент я незнаю, можно ли как-нибудь решить эту проблему. Чувствую, что единственное решение, это просто расположить фоновый блок так, чтобы он не перекрывал самые важные кнопки на самой карте.

В общем, такое вот решение. Может кому-то пригодится, да и мне, наверняка, тоже.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5

  • Валерий

    Здравствуйте, Михаил! Как всегда, кратко ясно, интересно и полезно!!!

    2016-05-31 в 7:44 | Ответить