我正在尝试设计单页网站，但每当我调整页面大小时，我的联系表单都会向上移动。
我试图让它在背景图像上保持固定。如何让div保持不变？
我的Html：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Title</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Custom CSS -->
<link href="css/full-slider.css" rel="stylesheet">
<link href="css/full-slider.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/footer-distributed-with-address-and-phones.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#About">About</a>
</li>
<li>
<a href="#Services">What we do</a>
</li>
<li>
<a href="#Contact">Portfolio</a>
</li>
<li>
<a href="#Form">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
<body>
<!-- Page Content -->
<div class="container">
<hr class="featurette-divider">
<!-- First Featurette -->
<div class="featurette" id="About">
<img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
<h2 class="featurette-heading">Bla Bla Bla
<span class="text-muted">More Bla Bla Bla</span>
</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- Second Featurette -->
<div class="featurette" id="Services">
<img class="featurette-image img-circle img-responsive pull-left" src="http://placehold.it/500x500">
<h2 class="featurette-heading">More text goes here
<span class="text-muted">There will be additional things written.</span>
</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- Third Featurette -->
<div class="featurette" id="Contact">
<img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
<h2 class="featurette-heading">Final Part
<span class="text-muted">Will Seal the Deal.</span>
</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- Contact -->
<p class="intro">
This is where the contact form will go</p>
</div>
<br>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<div id="wrap">
<img class="image" src="http://thekitemap.com/images/feedback-img.jpg">
<div id="form-div">
<form class="form" id="form1">
<p><br>
<input type="text" name="user" ng-model="user" ng-minlength="3" ng-maxlength="9" required placeholder="Name">
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">A name is required.</span>
<span ng-show="myForm.user.$error.minlength">Name is too short.</span>
<span ng-show="myForm.user.$error.maxlength"> Name is too long.</span>
</span>
</p>
<p><br>
<input type="email" name="email" ng-model="email" required placeholder="Email">
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email address is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p class="inputfield"><label for="message"><br></label></p>
<textarea name="message" id="message" tabindex="2" placeholder="Your Message"></textarea>
<p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid"/>
<div class="ease"></div>
</div>
</p>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = '';
$scope.email = '';
});
</script>
</div>
</body>
<br>
<!--Footer-->
<footer class="footer-distributed">
<div class="footer-left">
<h3>Company<span>logo</span></h3>
<p class="footer-links">
<a href="#">Home</a>
·
<a href="#">About</a>
·
<a href="#">What we do</a>
·
<a href="#">Portfolio</a>
·
<a href="#">Contact</a>
</p>
<p class="footer-company-name">Firm © 2015</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>1 Main Street</span> City, Country</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+5 555 123456</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:support@company.com">email@company.com</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About Us</span>
Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
</p>
<div class="footer-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</footer>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</html>
我的CSS： @import url（'http://fonts.googleapis.com/css?family=Open+Sans:400,700'）;
*{
padding:0;
margin:0;
}
html{
background-color: #eaf0f2;
}
body{
font:14px/1.5 Arial, Helvetica, sans-serif;
min-width: 750px;
}
header{
text-align: center;
padding-top: 100px;
margin-bottom:200px;
}
header h1{
font: normal 32px/1.5 'Open Sans', sans-serif;
color: #3F71AE;
padding-bottom: 16px;
}
header h2{
color: #F05283;
}
header h2 a{
color:inherit;
text-decoration: none;
display: inline-block;
border: 1px solid #F05283;
padding: 10px 15px;
border-radius: 3px;
font: bold 14px/1 'Open Sans', sans-serif;
text-transform: uppercase;
}
header h2 a:hover{
background-color:#F05283;
transition: 0.2s;
color:#fff;
}
header ul {
max-width: 600px;
margin: 60px auto 0;
}
header ul a{
text-decoration: none;
color: #FFF;
text-align: left;
background-color: #B9C1CA;
padding: 10px 16px;
border-radius: 2px;
opacity: 0.8;
font-size: 16px;
display: inline-block;
margin: 4px;
line-height: 1;
outline: none;
transition: 0.2s ease;
}
header ul li a.active{
background-color: #66B650;
pointer-events: none;
}
header ul li a:hover {
opacity: 1;
}
header ul{
list-style: none;
padding: 0;
}
header ul li{
display: inline-block;
}
.container{
margin-left:auto;
margin-right:auto;
width:960px;
}
.validation-message {
color: #f00;
}
#feedback-page{
text-align:center;
}
.image {
width:100%;
height:100%;
}
#wrap {
width: 100%;
float:left;
padding-top:0px;
}
#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top:-730px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color:#3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
input[type="text"] {
display: inline;
width: 100%;
height: 30px;
font-size: 16px;
background-color:white;
font-family: 'Lato';
}
input[type="email"] {
display: inline;
width: 100%;
height: 30px;
font-size: 16px;
background-color: white;
font-family: 'Lato';
}
/* Icons ---------------------------------- */
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:24px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width: 100%;
background-color:white;
}
@media only screen and (max-width: 580px) {
#form-div{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
footer{
position: fixed;
bottom: 0px;
}
@media (max-height:800px){
footer { position: static; }
header { padding-top:40px; }
}