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

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

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

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

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!

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

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

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

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

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

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

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

Понравилась статья? Поделиться с друзьями:
Комментариев: 2
  1. Никита

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

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

    .map-block {
    background: #000;
    }
    .map-block > ymaps {
    filter: grayscale(100%);
    opacity: 0.5
    }

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

  2. Валерий

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: