Stuck with the responsivness of my footer page

Question

I'm a bit confused...

Whatever I try, I just can't put my contact form over my google iframe... I mean, I can, and it is okay, but ONLY if I don't want my site to be responsive because, when I reduce my windows, i can see that it stays at is position because of the absolute assignment...

Any idea how I couls make it perfectly responsive at this position, watever the size of the screen?

 /*ajout des polices*/ @font-face{ font-family : "Roboto"; src : url('./fonts/Roboto-Black.ttf'); } @font-face{ font-family : "RobotoBold"; src : url('./fonts/Roboto-Bold.ttf'); } @font-face{ font-family : "RobotoThin"; src : url('./fonts/Roboto-Thin.ttf'); } @font-face { font-family: 'FontAwsome'; src: url('./fonts/fontawsome-webfont.eot'); src: url('./fonts/fontawsome-webfont.woff') format('woff'), src: url('./fonts/fontawsome-webfont.ttf') format('truetype'), src: url('./fonts/fontawsome-webfont.otf') format('otf'), src: url('./fonts/fontawsome-webfont.svg') format('svg'); } /*ajout des médias queries pour que le site soit résponsif*/ @media(max-width:767px){ .asside, nav { display: flex; flex-wrap: wrap; padding-left: 3%; } .nav { display: flex; flex-wrap: wrap; margin: 0px; padding: 0px; } .row { display: flex; flex-direction: column; flex-wrap: wrap; } figcaption h1 { position: absolute; color: #FFF; margin-left: -60px; margin-top: -55px; width: 50%; font-size: 0.1em; } .imagemac img { width: 70%; margin-right: 3%; } .assidecontent { display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap; padding: 1% 3% 1% 3%; width: 100%; margin: 0; } .servicescircles { position: absolute; left: -55px; top: -55px; } .button1 { display: none; } .projetsrows { display: flex; flex-wrap: wrap; } .projetsrows img { display: flex; flex-wrap: wrap; margin: auto; } .projetslist { background-color: #e4e4e4; padding: 2%; display: flex; flex-wrap: wrap; } .projetslist li { background-color: #e4e4e4; border-radius: 3px; padding: 12px; } .projetslist li:hover { border-bottom: 2px solid blue; border-radius: 5px; background-color: #62a8d0; padding: 12px; } .separateur1, .separateur2 { margin-left: 150px; } .google_iframe { display: none; } .formposition { width: auto; margin: auto; } } @media(max-width:1200px){ figcaption { position: absolute; margin-top: -50px; } .button1 { display: none; } .asside { display: flex; flex-wrap: wrap; flex-direction: column; } .asside img { width: 50%; } .projetslist { width: 100%; position: relative; margin: auto; background-color: #f5f5f5; } .projetslist li { background-color: #e4e4e4; border-radius: 3px; padding: 12px; } .projetslist li:hover { border-bottom: 2px solid blue; border-radius: 5px; background-color: #62a8d0; padding: 12px; } } @media(max-width:2000px){ } /*header du site*/ /*ajout d'une keyframe pour annimer le slider*/ @keyframes sliding { 0% { left: 0%; } 25% { left: 0%; } 50% { left: -100%; } 75% { left: -100%; } 100% { left: - 200%; } } /* appliquer une police globale à toute la page*/ body { padding: 0; margin: 0; font-family: "RobotoBold", sans-serif; font-size: 1em; } header { position: relative; } /*navigation et logo*/ nav { display: flex; flex-direction: row; justify-content: space-between; margin: 0 15% 0 15%; } .nav ul { margin: 0px; padding: 0px; list-style:none; display: flex; flex-direction: row; font-family: "RobotoBold", sans-serif; font-size: 1.1em; } .blocmenu { display: flex; flex-wrap: wrap; position: relative; } .nav a { margin: 15px 0px 15px 0px; } ul a { padding: 1em; display: block; text-align:center; text-decoration: none; color: black; } li a:hover { display: block; text-align:center; text-decoration: none; border-top: 3px solid #62a8d0; padding-top: 15px; } /*slider*/ div#slider { width: 100%; overflow: hidden; box-shadow: 0px 25px 120px #999999; } div#slider figure { position: relative; width: 500%; margin: 0; padding: 0; font-size: 0; left: 0; text-align: left; animation: 10s sliding infinite; } div#slider figure img { width: 20%; height: auto; float: left; } figcaption { position: absolute; color: #FFF; top: 230px; left: 170px; width: 50%; font-size: 1.4em; text-decoration: none; } .button1, .button2 { color: #FFF; text-align: center; padding: 10px 0px 10px 0px; margin: 10px; border-radius: 5px; background-color: #62a8d0; box-shadow: 1px 3px 1px #1a7790; width: 20%; } .button1 a, .button2 a { color: #FFF; text-decoration: none; font-size: 1.5em; } .button1:hover, .button2:hover { background-color: #00557f; } .fa-chevron-left { color: #FFF; justify-content: flex-start; position: absolute; justify-content: center; left: 15px; font-size: 1.8em !important; top: 50%; } .fa-chevron-right { color: #FFF; justify-content: flex-end; position: absolute; right: 15px; font-size: 1.8em !important; top: 50%; } .fa-chevron-right:hover, .fa-chevron-left:hover { font-size: 2.8em !important; } /*forme des titres */ h1 { font-size: 2.2em; font-family: "RobotoBold", sans-serif; } /* gestion des séparateurs entre titre et articles*/ /*.point_bleu { position: absolute; width: 15px; height: 15px; border-radius: 20px; background: #62a8d0; }*/ .hr1, .hr2 { width: 60px; margin: 0; } .separateur1 { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; padding-bottom: 35px; margin: auto; } .separateur2 { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; padding-bottom: 35px; margin: auto; } /* section services / /*centrer le corps du bloc*/ .bloc_centre { margin: 0 25% 0 25%; text-align: center; } .services { width: auto; padding: 5% 0% 3% 0%; margin: 0% 10% 0% 10%; } .fa-circle { position: relative; font-size: 1.2em; border-radius: 50%; color: #62a8d0; padding: 3px; } .fa-chart-line, .fa-cubes, .fa-chart-pie { color: #62a8d0; font-size: 2.4em; border: 1px solid black; border-radius: 50%; padding: 15px; } .servicescircles { position: relative; left: 55px; top: -45px; } .asside { display: flex; flex-direction: row; } .asside img { margin: auto; width: 120%; } .assidebloc { display: flex; flex-direction: column; } .assidecontent { display: flex; flex-direction: row; margin: 5% 0% 0% 20%; } .assideicons { margin: 5% 0 5% 0; } .assidetext { display: flex; flex-direction: column; padding: 1% 3% 1% 3%; } b { color: #62a8d0; } /*création d'un fond effet jumbotron pour la section projets*/ .projets { background-color: #f5f5f5; padding: 3% 5% 10% 5%; } .projetslist { border: 0px solid black; border-radius: 5px; display: flex; flex-direction: row; list-style: none; margin: auto; justify-content: center; } .projetslist li { background-color: #e4e4e4; padding: 12px; margin: 5% 0% 0% 0%; } .projetslist li:hover { background-color: #62a8d0; border-bottom: 3px solid #1a7790; } /* le bouton doit il êtres en active, ou est-ce un effet de hover?*/ /*.active { border-bottom: 2px solid blue; border-radius: 5px; background-color: #62a8d0; padding: 12px; }*/ /*mise en forme des blocs de la partie projets et de leurs éléments*/ /* mise ne place des images de la partir portfolio*/ .projetsrows { display: flex; flex-direction: row; margin: 5% 0% 0% 0%; } .projetsrows img { width: 85%; margin: 1% 0% 1% 0%; } .projetsrows img:hover { width: 86%; border: 1px solid blue; border-radius: 5px; padding: 3% 0% 3% 0%; background-color: black; opacity: 0.7; box-shadow: 7px 7px 5px grey; } /*mise en forme des éléments de la partie contact*/ .contactinfos { padding-left: 15px; } form { z-index: 1; padding: 1%; display: flex; flex-direction: column; position: relative; width: 300px; height: 550px; background-color: rgba(255, 255, 255, 0.7); /*border: 1px solid #62a8d0;*/ /*décorations facultatives, à voir avec mentor*/ /*border-radius: 5px;*/ } input, textarea { padding: 3%; margin: 0% 3% 2% 3%; border-radius: 5px; width: 85%; } .formposition { position: absolute; margin: 3% 0% 0% 80%; } .google_iframe { background-color: #A9A9FF; } 

 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Web Agency</title> <link rel="stylesheet" type="text/css" href="./style.css"> <link rel="stylesheet" href=".fonts/css/fontawsome-all.css"> <!--<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> --> </head> <body> <header style="background-color: #fafafa"> <!-- entête du site, contiendra le menu de navigation ainsi que le carrousel--> <div class="blocsmenu"> <nav class="nav"> <!-- navigation--> <a href="#"><img src="./webagency_images/images/logo.png" alt="Web Agency Logo"/></a> <ul class="menu"> <li class="menu-item"><a href="#">Accueil</a></li> <li class="menu-item"><a href="#">Services</a></li> <li class="menu-item"><a href="#">Portfolio</a></li> <li class="menu-item"><a href="#">Contact</a></li> </ul> </nav> </div> <div id="slider"> <!-- carrousel--> <figure> <img src="./webagency_images/images/slider/bg1.jpg" alt="Images Slider"> <img src="./webagency_images/images/slider/bg2.jpg" alt="Images Slider"> </figure> <figcaption> <h1><span style="color:#62a8d0">WEBAGENCY</span> : L'AGENCE DE TOUS VOS PROJETS!</h1> <p>Vous avez un projet Web? La WebAgency vous aide à le réaliser!</p> <p class="button1" type="button"><a href="#">Plus d'infos</a></p> </figcaption> <div class="slider_navigation"> <div class="fa fa-chevron-left" aria-hidden="true"></div> <div class="fa fa-chevron-right" aria-hidden="true"></div> </div> </div> </header> <!-- section services de la page du site--> <section class="services"> <h1 style="text-align: center">NOS SERVICES</h1><br> <div class="separateur1"><hr class="hr1"><span class="fas fa-circle"></span><hr class="hr1"></div> <p class="bloc_centre">Nous proposons les meilleurs services et en plus, aux meilleurs prix!! Nous avons une équipe de professionnels tous prêt à accueillir votre projet et lui donner vie selon vos souhaits. N'hésitez pas à nous contacter pour un devis, un projet web ou pour un magasin web. Les éléments pris en charge par l'UX vont de la partie commerciale à l'accessibilité.</p><br/> </div> <div class="asside"> <div><img src="./webagency_images/images/main-feature.png" alt="Mac" /></div> <div class="assidebloc"> <div class="assidecontent"> <div class="assideicons"><i class="fas fa-chart-line"></i><i class="fas fa-circle servicescircles"></i></div> <div class="assidetext"><h1>UX Design</h1> <p><b>U</b>ser e<b>X</b>périence : son rôle à pour but de faire la liaison entre l'interface construite, et l'utilisateur. Il est chargé de rendre l'expérience d'utilisation fluide, simple, intuitive, de faciliter l'utilisation de l'utilisateur, de réfléchir pour lui à tout ces moyens là d'avoir la meilleure expérience possible sur son support. Faites confiance à nos équipes pour tout mettre en oeuvre pour avoir l'interface parfaitement en accords avec vos attentes!</p> </div></div> <div class="assidecontent"> <div class="assideicons"><i class="fas fa-cubes"></i><i class="fas fa-circle servicescircles"></i></div> <div class="assidetext"><h1>UI Design</h1> <p><b>U</b>ser <b>I</b>nterface : son rôle est là pour rendre accessible, optimale et facile, l'accès et l'exécution des dispositifs liés à l'interface des applications et machines. Nos professionnels sont là pour vous assurer la meilleure expérience possible!</p> </div></div> <div class="assidecontent"> <div class="assideicons"><i class="fas fa-chart-pie"></i><i class="fas fa-circle servicescircles"></i></div> <div class="assidetext"><h1>SEO</h1> <p><b>S</b>earch <b>E</b>ngine <b>O</b>ptimization : son rôle est d'optimiser au mieux le référencement des outils web, d'un site... Le travaille se fait sur les mots clés, la sémantique, l'étude de la concurrence, du marché actuel et doit être fait régulièrement pour mettre à jour les données importantes au référencement. Soyez assuré que votre site sera toujours référencé au mieux et que les clés du référencement seront mises à jours régulièrement par nos services! </p> </div></div> </div> </div> </section> <!-- section portfolio de la page du site --> <section class="projets"> <h1 style="text-align: center">NOS PROJETS</h1><br> <div class="separateur1"><hr class="hr1"><span class="fas fa-circle"></span><hr class="hr1"></div> <p class="bloc_centre">Vous pourrez voir ici tout les projets sur lesquels nous avons travaillé. Qu'ils soient personnel ou professionnel, comptez sur nous pour vous donner le résultat le plus satisfaisant possible! Nous aimons la diversité, nous aimons les identités différentes et travaillons autour de ça.</p><br /> <ul class="projetslist"> <li class="active">All Works</li> <li>Creative</li> <li>Corporate</li> <li>Portfolio</li> </ul> <div class="projetsrows"> <div><img src="./webagency_images/images/portfolio/01.jpg" alt="Image1"/></div> <div><img src="./webagency_images/images/portfolio/02.jpg" alt="Image2"/></div> <div><img src="./webagency_images/images/portfolio/03.jpg" alt="Image3"/></div> <div><img src="./webagency_images/images/portfolio/04.jpg" alt="Image4"/></div> </div> <div class="projetsrows"> <div><img src="./webagency_images/images/portfolio/05.jpg" alt="Image5"/></div> <div><img src="./webagency_images/images/portfolio/06.jpg" alt="Image6"/></div> <div><img src="./webagency_images/images/portfolio/07.jpg" alt="Image7"/></div> <div><img src="./webagency_images/images/portfolio/08.jpg" alt="Image8"/></div> </div> </section> <!-- bas de page contenant un iframe google maps et un formulaire de contact--> <footer> <div class="formposition"> <form method="post"> <h1 class="contactinfos">Contact Info</h1> <h4 class="contactinfos">WebAgency SAS<br /> 25 rue d'Hauteville 75010 Paris<br /> Tel : 01 02 03 04 05</h4> <label for="Nom"></label> <input type="text" name="Nom" placeholder="Nom"><br/> <label for="E-mail"></label> <input type="text" name="E-mail" placeholder="E-mail"><br /> <label for="Sujet"></label> <input type="text" name="Sujet" placeholder="Sujet"><br /> <label for="Message"></label> <textarea rows="50" cols="35" placeholder="Votre message"></textarea><br /> <p class="button2" style="width: 50%">Envoyer</p> </form> </div> <div class="google_iframe"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11139.440186098542!2d4.878186999999999!3d45.73390145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1524499866273" width="100%" height="650" style="border:0; opacity: 0.7" allowfullscreen></iframe> </div> </footer> </body> </html> 

Answer 1

One way you can get past this is through some JS math. Here's an example (using JQuery):

const formPercentLeft = 40;

$(window).resize(function(){
  var windowWidth = $(window).innerWidth();
  var pxLeft = formPercentLeft * windowWidth;
  $(".formposition").css("left", pxLeft);
});

Just hardcode the position, relative to the width of the page, you want your form to be; then on a document resize event, change the CSS left pixel value of your position: absolute form.

Answer 2

I don't really know what you exactly want to get here, but I think you use absolute positioning wrong. First of all, you should add to your footer a position: relative to make is child positioned relative to it, not to whole html.

Then don't use margins on absolute positioned element, this is why top , bottom , left , right properties are for, so:

footer {
  position: relative; //to position .formposition relative to footer
}

.formposition {
  top: 3%;
  right: 0; //to put it to right side of container
}

If its not what you want, you should provide us with moro info haw exactly you want it to look.