Нещодавно зіткнувся з такою цікавою завданням - потрібно було на інтерактивну карту накласти фоновий блок з контактами для зв'язку. Дуже довго мучився, але в підсумку знайшов рішення. Може кому-небудь коли-небудь буде потрібно, тому і пишу. Це буде невелика заміточка.
Проблема з інтерактивними картами Яндекса
Загалом, при верстці одного шаблону мені потрібно було в футер вставити інтерактивну карту Яндекса. Чи не картинку, а мати робочу карту, по якій людина може щось знайти. Сама карта вставляється за допомогою скрипта, я її обернув блоком з унікальним ідентифікатором. Але далі постало завдання: як накласти блок з фоном на саму карту? Ви можете побачити на цьому скріншоті, як потрібно було зробити:
Помаранчевим прямокутником я закрив конфіденційну інформацію, але суть зрозуміла. Потрібно накласти напівпрозорий блок на саму карту. Здавалося б, які проблеми, але не тут то було.
Що я тільки не пробував. Спочатку поставив футера відносне позиціонування, а напівпрозорому блоку - абсолютне, але нічого не вийшло. Також я експериментував з шарами, намагаючись мапі постав шар нижче, ніж блоку, але блок вперто не хотів з'являтися - інтерактивна карта його перекривала. Але в підсумку я знайшов рішення.
Рішення проблеми
Блоку потрібно задати абсолютне позиціонування щодо всієї сторінки (body), а не футера. Також для переконливості я додав z-index з великим значенням. У підсумку вийшло так:
Отже, щоб фоновий блок відобразився поверх карти, потрібно зробити наступне:
Задати йому абсолютне позиціонування і координати. При цьому карта повинна бути самим нижнім елементом сайту, нижче не повинно бути нічого. Це потрібно для того, щоб не морочитися з координатами.
Для переконливості задати номер шару.
Все, тепер все працює, але з одним застереженням. Інтерактивна карта працює тільки в тій області, де вона не перекривається блоком. На даний момент я незнаю, чи можна як-небудь вирішити цю проблему. Відчуваю, що єдине рішення, це просто розташувати фоновий блок так, щоб він не перекривав найважливіші кнопки на самій карті.
Загалом, таке ось рішення. Може комусь стане в нагоді, та й мені, напевно, теж.
Вам також може бути цікаво