html - 坚持我的页脚页面的响应能力

Question

我有点糊涂了...

无论我尝试什么，我都无法将我的联系表单放在我的 google iframe 上......我的意思是，我可以，而且没关系，但前提是我不希望我的网站响应，因为，当我缩小我的窗口，我可以看到它停留在原位置，因为绝对分配...

无论屏幕大小如何，我都知道如何让它在这个位置完美响应吗？

/*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

我真的不知道你到底想在这里得到什么，但我认为你使用 absolute 定位错误。首先，您应该在 footer 中添加一个 position: relative 以使子项相对于它而不是整个 html 定位。

然后不要在绝对定位元素上使用边距，这就是为什么 top, bottom, left, right 属性是为了，所以:

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

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

如果它不是您想要的，您应该向我们提供您想要的外观的详细信息。