Как добавить фоновый блок поверх карты Яндекс 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>

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

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

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

Комментариев: 3
  1. Сергей

    Вдруг кому пригодится.

    Для того что бы интерактивная карта могла работать в области где расположен div, нужно к его стилю дописать «pointer-events: none», этот стиль предотвращает события указателя на элементе. Теперь даже если наложенный div растянуть на всю карту, то функциональность карты сохранится.

  2. Никита

    Доброго времени! Необходимо было найти решение по этому же вопросу. В результате нашел выход из ситуации, БЕЗ наложения фона поверх карты. Если вопрос актуальный, то вот решение:

    — Берем карту в блок и присваиваем ему класс, например map-block;

    — Далее в стилях прописываем:

    .map-block {

    background: #000;

    }

    .map-block > ymaps {

    filter: grayscale (100%);

    opacity: 0.5

    }

    В результате все заработало

  3. Валерий

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

Добавить комментарий