Absolute div under footer - html

Question

When I add a footer field under the div, which is absolute value, this field escapes on mobile and desktop. Also, iframe doesn't have full height. What should I do?
All details are given in the attachment.
When I add a footer field under the div, which is absolute value, this field escapes on mobile and desktop. Also, iframe doesn't have full height. What should I do?
All details are given in the attachment.
Attach:
My Code:
.contact-form {
position: absolute;
z-index: 100;
left: 0;
right: 0;
margin-top: 20em;
}
.form {
background: #fff;
border-radius: 1em;
padding: 3em;
}
.maps {
z-index: 0;
position: relative;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
width: 100%;
overflow: hidden;
margin-bottom: -1em;
}
.maps iframe {
width: 100%;
overflow: hidden;
height: 100vh;
}
<div class="contact-form">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form mt-5 mb-5 d-flex flex-md-row flex-column">
<div class="col-md-5 mt-5">
<h4>İletişim</h4>
<div id="title" class="mt-5 d-flex">
<h6><i class="fas fa-paper-plane mr-2"></i>E-Posta: baris#reklamodasi.com.tr</h6>
</div>
<div id="title" class="mt-4 d-flex">
<h6><i class="fas fa-phone-alt mr-2"></i>Telefon Numarası: [phone]</h6>
</div>
<div id="title" class="mt-4 d-flex">
<h6><i class="fas fa-sort-numeric-up mr-2"></i>Sicil Numarası: 000010001011111100</h6>
</div>
<div id="title" class="mt-4 d-flex">
<h6><i class="fas fa-sort-numeric-down mr-2"></i>Mersis Numarası: 000010001011111100</h6>
</div>
<p class="mt-5" style="color: #939393;"><i class="fas fa-map-marker mr-2" style="color: #0097b1;"></i>Küçükbakkalköy Mh. Küçük Setli Sokak Denge Panorama Plaza. No: 5-9 Kat: 3 D:13 34750, Ataşehir - İstanbul</p>
</div>
<div class="col-md-7 mt-5 mb-4">
<div class="d-block">
<div class="input-group mb-3 mr-2">
<input type="text" class="form-control" placeholder="Adınız Soyadınız" aria-label="ad-soyad" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="E-Posta" aria-label="e-mail" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1"></label>
<textarea placeholder="Mesajınız" class="form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>
<button style="width: 100%;" type="button" class="btn btn-sincap"><i class="far fa-paper-plane mr-2"></i>Gönder</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="maps">
<div class="row">
<div class="col-md-12">
<iframe class="map_h" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24095.133376834387!2d29.11235246540525!3d40.98385285407077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2e8746b0ec51372a!2sReklam%20Odas%C4%B1!5e0!3m2!1str!2str!4v1595930989510!5m2!1str!2str"
frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
</div>
<div class="footer pb-5 text-center">
<div class="container">
<div class="row">
<div class="col-md-12 copy">
<img src="/materials/logo.svg" width="90px" height="90px">
</div>
<div class="col-md-12">
<p>All Rights Reserved 2020 | Reklam Odası</p>
</div>
</div>
</div>
</div>
thank you so much this works little bit but this time it looks like this.
Vikas Katal

Answer 1

When you absolute an element relative to another element try to wrap both by a parent element. It will automatically fix many issues you may face in the future.
<div class="form-map-wrapper">
<div class="contact-form">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form mt-5 mb-5 d-flex flex-md-row flex-column">
<div class="col-md-5 mt-5">
<h4>İletişim</h4>
<div id="title" class="mt-5 d-flex"><h6><i class="fas fa-paper-plane mr-2"></i>E-Posta: baris#reklamodasi.com.tr</h6></div>
<div id="title" class="mt-4 d-flex"><h6><i class="fas fa-phone-alt mr-2"></i>Telefon Numarası: [phone]</h6></div>
<div id="title" class="mt-4 d-flex"><h6><i class="fas fa-sort-numeric-up mr-2"></i>Sicil Numarası: 000010001011111100</h6></div>
<div id="title" class="mt-4 d-flex"><h6><i class="fas fa-sort-numeric-down mr-2"></i>Mersis Numarası: 000010001011111100</h6></div>
<p class="mt-5" style="color: #939393;"><i class="fas fa-map-marker mr-2" style="color: #0097b1;"></i>Küçükbakkalköy Mh. Küçük Setli Sokak
Denge Panorama Plaza. No: 5-9 Kat: 3 D:13 34750, Ataşehir - İstanbul</p>
</div>
<div class="col-md-7 mt-5 mb-4">
<div class="d-block">
<div class="input-group mb-3 mr-2">
<input type="text" class="form-control" placeholder="Adınız Soyadınız" aria-label="ad-soyad" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="E-Posta" aria-label="e-mail" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1"></label>
<textarea placeholder="Mesajınız" class="form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>
<button style="width: 100%;" type="button" class="btn btn-sincap"><i class="far fa-paper-plane mr-2"></i>Gönder</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="maps">
<div class="row">
<div class="col-md-12">
<iframe class="map_h" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24095.133376834387!2d29.11235246540525!3d40.98385285407077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2e8746b0ec51372a!2sReklam%20Odas%C4%B1!5e0!3m2!1str!2str!4v1595930989510!5m2!1str!2str" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
</div>
</div>
Also add z-index wisely to relative and absolute elements because it can effect badly for other elements (Ex:- for Fixed Menu)
.form-map-wrapper {
position: relative;
z-index: 1;
}
.maps {
position: absolute;
z-index: 1;
}