Почему div блок смещается при изменении высоты?

Question

[Максим Герасименко]

Всем доброго времени суток!
На этом сайте на Главной странице есть Google карта. При клики по ссылке Look at map карта плавно раскрывается (Увеличивается высота через jQuery).
Проблема в том что когда карта раскрывается то она смещается вверх.
Подскажите как сделать так что бы карта при раскрытии не смещалась?

<div id="hfooter" style="height: 70px;opacity: 0.5;overflow: hidden;">
<a class="link_footer"><i class="fa fa-map-marker"></i> Look at map</a>
 
   <iframe class="b-lazy b-loaded" style="width:100%; height: 270px;border:0;" width="600" height="450" frameborder="0" allowfullscreen="" aria-hidden="false" tabindex="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2689.9556633261286!2d-122.3369641843694!3d47.60755177918472!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54906ab15f574f0f%3A0xe1e6a53a76bb681c!2s1215%204th%20Ave%2C%20Seattle%2C%20WA%2098101%2C%20USA!5e0!3m2!1sen!2sru!4v1587839143691!5m2!1sen!2sru"></iframe>	
    
</div>

$( ".link_footer" ).click(function(){
$('#hfooter').animate({
height:270,
opacity: 0.9
}, 1200 );
$('.link_footer').remove();
	});

Answer 1

[Роман Дворянов]

Направление увеличение высоты зависит от того, где находится элемент в потоке и как позиционирован.

В любом случае анимируя высоту, вам нужно еще опускать/поднимать сам элемент на половину от его новой высоты, соответственно, для этого можно использовать свойство transform: translateY(), если вам нужно поднять вверх указываете отрицательное значение на которое нужно приподнять или положительное, если нужно опустить элемент.