Div positioned absolutely beneath the footer

I'm facing an issue where the footer field I add under a div with an absolute value escapes on both mobile and desktop. Additionally, the iframe does not have full height. Any suggestions on what I should do?

All the specifics are provided in the attachment.

When I put a footer beneath the div that's set to be absolutely positioned, it seems to overflow on mobile and desktop views. Plus, the height of the iframe isn't displaying correctly. Can you guide me on how to fix this?

Please refer to the attached details for more information.

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;
}

thank you so much this works little bit but this time it looks like this. Vikas Katal

https://i.sstatic.net/riHsW.png

htmlcssfooterabsolute

Answer №1

One helpful tip when positioning an element relative to another is to encapsulate both within a parent element. This simple practice can prevent potential issues down the line.

<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: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="375556455e447745525c5b565a585356445e1954585a194345">[email protected]</a></h6></div>
                            <div id="title" class="mt-4 d-flex"><h6><i class="fas fa-phone-alt mr-2"></i>Telefon Numarası: +90 534 613 72 62</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>
                            <a href="#"><button style="width: 100%;" type="button" class="btn btn-sincap"><i class="far fa-paper-plane mr-2"></i>Gönder</button></a>
                        </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>

Additionally, remember to assign z-index thoughtfully to relative and absolute elements to avoid interference with other parts of the layout like fixed menus.

.form-map-wrapper {
    position: relative;
    z-index: 1;
}

.maps {
    position: absolute;
    z-index: 1;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Paged Content: Turning a Lengthy Text into a Book-Like Format

I have a unique idea for displaying text like a flipping book on a web page. Users can use arrow keys to navigate through the content, giving it an interactive and engaging feel. Instead of focusing solely on page transitions, I am looking into implementi ...

phpjqueryhtmlcsspagination

Android: Substituting < p > and < br / > elements

My current situation involves receiving JSON data from a website and displaying it in a TextView. I have successfully achieved this, however, my boss requires the text to be plain with no paragraphs or empty lines. The text is retrieved from the website&a ...

androidhtml

"Safari is not displaying the element's height correctly when set to 100

I am facing an issue where I have a child div vertically centered under a parent div with a specific height. The child div is assigned the height:100% property, but it seems to be not working correctly on Safari only. To see more about this problem, you ca ...

cssmacossafariheight

Guide on creating uniform heights and widths for images with varying dimensions utilizing CSS (and percentage values)

Is there a way to ensure that all images maintain the same height and width using CSS percentages, rather than set pixel values? I'm working on displaying images in circles, where most are uniform in size but a few outliers distort the shape. The wide ...

javascripthtmlcssimagegoogle-maps-api-3

The never-ending scroll feature in Vue.js

For the component of cards in my project, I am trying to implement infinite scrolling with 3 cards per row. Upon reaching the end of the page, I intend to make an API call for the next page and display the subsequent set of cards. Below is my implementatio ...

htmlcsstypescriptvue.jsinfinite-scroll

Continuous loop of images displayed in a slideshow (HTML/JavaScript)

Greetings everyone, I am currently working on creating an endless loop slideshow of images for my website. Despite researching several resources, I am still struggling to get the code right. The issue I am facing is that only the image set in the HTML code ...

javascripthtmlcss

Using jquery ajax to add new rows to a MySQL table at the bottom, creating a repeating pattern

Using AJAX jQuery, I am constantly updating a table with data from a MySQL database at regular intervals. The refresh rate is set to 1 second. Below is the PHP file responsible for successfully creating the JSON data: <?php $servername = "localhost"; ...

htmljquerymysqljsonajax

Center aligning text within an accordion button using Bootstrap 5 framework

I'm struggling to center align the text inside the accordion button while keeping the arrow on the right side Here is an example of what I'm trying to achieve: https://i.sstatic.net/2brrY.png In the Bootstrap 5 documentation, there's an e ...

htmlcssbootstrap-5

Customizing Paths in Express Handlebars

I have a query regarding setting up custom folders in Express.js Here's my situation: I need to implement logic where if a specific name is present in my database, the paths for CSS and JS files should be altered before rendering. By default, my pat ...

javascriptcssnode.jsexpresshandlebars.js

Altering the display attribute cancels out any opacity transitions

When using JavaScript to change the opacity of an element with transition: opacity 1s, the expected duration of one second is met, as demonstrated here: onload = e => { var p = document.getElementsByTagName("p")[0]; p.style.opacity = 1; }; p { ...

javascripthtmlcss

Obtain offspring from a parent element using jQuery

$(document).ready(function() { $.ajax({ type: "POST", url: 'some/url', data: { 'name':'myname' }, success: function (result) { var result = ["st ...

javascriptjqueryhtmlajaxgetelementbyid

various stunning galleries accessible from a single page of thumbnail images

I'm trying to create a unique gallery experience on my website. I have a set of 6 images, each featuring a different house. What I want is for each image, when clicked, to open up a fancybox gallery showcasing 4 more detailed photos of the same house. ...

javascriptjqueryhtmlfancybox-2

Include a parent class within the style tags in your CSS code

Currently, I am facing an issue with a web application that I am developing. On the left side of the page, there is an editable area, and on the right side, there is a live preview. The live preview area contains an HTML file with specific fields that can ...

javascriptjqueryhtmlcssless

Complete layout photography using bootstrap 4

I'm looking to create a banner that adjusts appropriately for mobile and desktop display. Here's what I've tried: When it is displayed in mobile When it is displayed in desktop In my attempt, the text alignment was off even though I used ...

htmlcsstwitter-bootstrapimagebootstrap-4

Using Python with Selenium, attempt to click on a button designated as type="button"

I've been trying to click on a button in this Airbnb listing but none of the codes I tried seem to work. Here is one example of the HTML code: <li data-id="page-2" class="_1eqazlr"> <button type="button" class="_1ip5u88" aria-label="Page 2 ...

htmlpython-3.xselenium

Is there any method to ensure that IE8 properly displays opacity for a `:before` pseudo element?

Here is a simple CSS snippet that I am working with... div:before { content: "Hello there"; filter: alpha(opacity=40); -moz-opacity: .4; opacity: .4; } Check it out on jsFiddle. In Firefox 6, the :before pseudo element displays with t ...

cssinternet-explorer-8opacitypseudo-element

Keeping track of the toggle state using a cookie

While searching for a way to retain the toggle state, I stumbled upon js-cookie on GitHub. The documentation provides instructions on creating, reading, and deleting a cookie. However, an example would have been really helpful in enhancing my understanding ...

javascriptjqueryhtmlcookiestoggle

VS code showing live server as installed but failing to function properly

After installing the live server extension, I noticed that my browser is not updating when I save my HTML or other files. What could be causing this issue? ...

javascripthtmlcssvisual-studio-code

Ensure that each of the two divs maintains a 16:9 aspect ratio, and utilize one div to fill any remaining empty space through the

This layout is what I am aiming for: https://i.sstatic.net/uZdty.png While I can achieve a fixed aspect ratio with a 16:9 image by setting the img width to 100%, I run into an issue where the height scaling of flexbox becomes non-responsive. The height re ...

javascripthtmlcssflexbox

What is the best way to create a fully clickable navbar item for the Bootstrap dropdown feature?

I'm struggling to make a button in a navbar fully clickable for the dropdown to open. Even when I try adding margin instead of padding, it only makes things worse. Can someone help me figure out what mistake I'm making here? Essentially, my goal ...

javascriptjqueryhtmlcsstwitter-bootstrap