Недавно столкнулся с такой интересной задачей — нужно было на интерактивную карту наложить фоновый блок с контактами для связи. Очень долго мучался, но в итоге нашел решение. Может кому-нибудь когда-нибудь будет нужно, поэтому и пишу. Это будет небольшая заметочка.
Проблема с интерактивными картами Яндекса
В общем, при верстке одного шаблона мне нужно было в футер вставить интерактивную карту Яндекса. Не картинку, а иметь рабочую карту, по которой человек может что-то найти. Сама карта вставляется с помощью скрипта, я ее обернул блоком с уникальным идентификатором. Но далее предстала задача: как наложить блок с фоном на саму карту? Вы можете увидеть на этом скриншоте, как нужно было сделать:
Оранжевым прямоугольником я закрыл конфиденциальную информацию, но суть понятна. Нужно наложить полупрозрачный блок на саму карту. Казалось бы, какие проблемы, но не тут то было.
Что я только не пробовал. Сначала задал футера относительное позиционирование, а полупрозрачному блоку — абсолютное, но ничего не вышло. Также я экспериментировал со слоями, пытаясь карте задай слой ниже, чем блоку, но блок упорно не хотел появляться — интерактивная карта его перекрывала. Но в итоге я нашел решение.
Решение проблемы
Блоку нужно задать абсолютное позиционирование относительно всей страницы (body), а не футера. Также для убедительности я добавил z-index с большим значением. В итоге получилось так:
<div id="bg" style="position:absolute; left:0px; bottom:0px; z-index: 999; background: rgba(0, 0, 0, 0.5)">содержимое</div>
Итак, чтобы фоновый блок отобразился поверх карты, нужно сделать следующее:
Задать ему абсолютное позиционирование и координаты. При этом карта должна быть самым нижним элементом сайта, ниже не должно быть ничего. Это нужно для того, чтобы не морочиться с координатами.
Для убедительности задать номер слоя.
Все, теперь все работает, но с одной оговоркой. Интерактивная карта работает только в той области, где она не перекрывается блоком. На данный момент я незнаю, можно ли как-нибудь решить эту проблему. Чувствую, что единственное решение, это просто расположить фоновый блок так, чтобы он не перекрывал самые важные кнопки на самой карте.
В общем, такое вот решение. Может кому-то пригодится, да и мне, наверняка, тоже.
Доброго времени! Необходимо было найти решение по этому же вопросу. В результате нашел выход из ситуации, БЕЗ наложения фона поверх карты. Если вопрос актуальный, то вот решение:
— Берем карту в блок и присваиваем ему класс, например map-block;
— Далее в стилях прописываем:
.map-block {
background: #000;
}
.map-block > ymaps {
filter: grayscale(100%);
opacity: 0.5
}
В результате все заработало