我正在努力使页面上的表单固定在当前位置，并且不希望它在滚动页面时移动。应该总是在它当前的位置。表单{position：fixed}的css样式不起作用。它使整个表单从页面中消失。尝试了不同的技术，但没有一个确实奏效。
甚至尝试给表单元素一个{z-index：1000}，但这也没有帮助。 任何帮助将不胜感激。
.rafting-and-camping{
padding-left: 130px;
height: 47px;
width: 724px;
color: #3C4858;
font-family: Roboto;
font-size: 40px;
font-weight: bold;
line-height: 47px;
}
.ganga-river-camp-by {
padding-left: 130px;
height: 48px;
width: 500px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
line-height: 24px;
}
.stories {
padding-left: 190px;
height: 16px;
width: 63px;
color: #3C4858;
font-family: Roboto;
font-size: 14px;
line-height: 16px;
display: inline;
}
.hours {
padding-left: 78px;
height: 16px;
width: 49px;
color: #8492A6;
font-family: Roboto;
font-size: 14px;
line-height: 16px;
display: inline;
}
.viewed-135-times-tod {
padding-left: 78px;
height: 19px;
width: 171px;
color: #8492A6;
font-family: Roboto;
font-size: 16px;
line-height: 19px;
display: inline;
}
.starts-from-1600 {
padding-left: 420px;
height: 42px;
width: 174px;
color: #3C4858;
font-family: "PingFang SC";
font-size: 16px;
line-height: 22px;
display: inline
}
.mask {
margin-top: 2%;
padding-left: 130px;
height: 500.62px;
width: 1020px;
}
.rectangle-2 {
margin-left: 10%;
height: 90px;
width: 250px;
border: 1px solid #C0CCDA;
display: inline-block;
}
.rectangle-3 {
height: 90px;
width: 250px;
border: 1px solid #C0CCDA;
display: inline-block;
}
.scuba-price {
height: 0.51%;
width: 4.53%;
color: #3C4858;
font-family: "PingFang SC";
font-size: 20px;
font-weight: 500;
line-height: 28px;
}
.bali-scuba-divers {
height: 19px;
width: 123px;
color: #3C4858;
font-family: Roboto;
font-size: 16px;
line-height: 19px;
}
.line-2 {
margin-left: 130px;
box-sizing: border-box;
height: 0.04%;
width: 47.34%;
border: 1px solid #E5E9F2;
}
.what-to-expect {
padding-left: 130px;
padding-top: 20px;
height: 24px;
width: 134px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.let-s-sail-in-a-rega {
padding-left: 130px;
height: 125px;
width: 600px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 25px;
}
.what-s-included {
padding-left: 130px;
height: 24px;
width: 141px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.tea-a-vegetarian-l {
padding-left: 130px;
height: 0.44%;
width: 24.77%;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 24px;
}
.materials-and-tools {
padding-left: 130px;
height: 71px;
width: 606.29px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 25px;
}
.pre-requisites {
padding-left: 130px;
height: 24px;
width: 124px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.all-participants-sho {
padding-left: 130px;
height: 23px;
width: 606.29px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 23px;
}
.where-we-ll-meet {
padding-left: 130px;
height: 24px;
width: 153px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.being-born-in-the-wr {
padding-left: 130px;
height: 161px;
width: 606.29px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 23px;
}
.rectangle-4 {
padding-left: 130px;
height: 6.14%;
width: 47.34%;
}
.contact-operator {
padding-left: 130px;
height: 24px;
width: 154px;
color: #1FB6FF;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.cancellation-and-res {
padding-left: 130px;
height: 0.44%;
width: 25.7%;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.any-trip-or-experien {
padding-left: 130px;
height: 48px;
width: 606.29px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 24px;
}
.notes {
padding-left: 130px;
height: 0.44%;
width: 4.22%;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.we-ll-recommend-you {
padding-left: 130px;
height: 1.32%;
width: 47.37%;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 24px;
text-align: justify;
}
/*form style*/
.form {
max-width: 400px;
width: 100%;
margin-top: -95%;
margin-left: 60%;
position: relative;
overflow-y: auto;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="date"]{
width: 93%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact select {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="date"]:hover,
#contact select {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.rectangle-7 {
height: 57px;
width: 350px;
background-color: #273444;
}
.price {
height: 42px;
width: 87px;
color: #FFFFFF;
font-family: "PingFang SC";
font-size: 30px;
font-weight: 500;
line-height: 42px;
}
/* form end*/<!DOCTYPE html>
<html lang="en">
<head>
<title>TripShire</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="home.css">
</head>
</script>
<body>
<p class="rafting-and-camping">Rafting and camping by the Ganges</p>
<p class="ganga-river-camp-by"><b>Ganga River .</b> Camp by the river side and raft through the ice cold ganges</p>
<p class="stories">73 Stories</p>
<p class="hours">6 hours</p>
<p class="viewed-135-times-tod">Viewed 135 times today</p>
<p class="starts-from-1600">Starts from ₹1600</p>
<img class="mask" src="rafting.jpg">
<div class="rectangle-2">
<p class="scuba-price">₹1200</p>
<p class="bali-scuba-divers">Bali Scuba Drivers</p>
</div>
<div class="rectangle-3">
<p class="scuba-price">₹2500</p>
<p class="bali-scuba-divers">White Water Tours</p>
</div>
<div class="rectangle-3">
<p class="scuba-price">₹1500</p>
<p class="bali-scuba-divers">Bali Scuba Drivers</p>
</div>
<div class="rectangle-3">
<p class="scuba-price">₹3200</p>
<p class="bali-scuba-divers">Bali Scuba Drivers</p>
</div>
<hr class="line-2">
<h2 class="what-to-expect"><b>What to expect</b></h2>
<p class="let-s-sail-in-a-rega">Let's sail in a regatta sailboat built for a regatta in France and </br> remodeled. The idea is we enjoy Barcelona in a different and </br> adventurous way. We'll experiment the feeling of sailing in a boat that </br> can get high speed. The experience includes a selection of </br> "embutidos"(kind of Catalan meat) specially selected.</p>
<hr class="line-2">
<h2 class="what-s-included"><b>What's included</b></h2>
<h3 class="tea-a-vegetarian-l">Tea and a vegetarian lunch</h3>
<p class="materials-and-tools">Materials and tools </br> Everything will be provided. All animals are ethically sourced and were not killed specially for these workshops</p>
<hr class="line-2">
<h3 class="pre-requisites"><b>Pre requisites</b></h3>
<p class="all-participants-sho">All participants should be greater than 12 years of age</p>
<hr class="line-2">
<h2 class="where-we-ll-meet"><b>Where we'll meet</b></h2>
<p class="being-born-in-the-wr">Being born in the wrong country has always taken a toll on Lauren </br> and Max. With the urge of reliving the golden years, they have been </br> hosting 18th century parties around the world to fill the void. In the </br> real world, Lauren is a fashion stylist and Max works in a video </br> production. </br>
</br>
Address: Terrace Restaurant, Okura Macau, 28F
</p>
<img class="rectangle-4" src="rafting.jpg">
<p class="contact-operator">Contact Operator</p>
<hr class="line-2">
<h2 class="cancellation-and-res"><b>Cancellation and rescheduling policy</b></h2>
<p class="any-trip-or-experien">Any trip or experience can be canceled and fully refunded within 24 </br> hours of purchase.</p>
<hr class="line-2">
<h2 class="notes"><b>Notes</b></h2>
<p class="we-ll-recommend-you">We recommend ypu to get a jumper or something to keep you warm </br> (even in summer). This is a weather-dependent experience. This Experience is subject to sailing and weather conditions.</p>
<!-- Form -->
<div class="container form">
<form id="contact" action="" method="post" >
<h3 class="rectangle-7">₹2500 per person</h3>
<fieldset>
<p>Choose your date</p>
<input type="date" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<p>Guests</p>
<select id="guests" name="guests">
<option value="australia">5 guest</option>
<option value="canada">4 guest</option>
<option value="usa">3 guest</option>
<option value="usa">2 guest</option>
<option value="usa">1 guest</option>
</select>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
<!-- form end -->
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
document.getElementById("contact").style.postion = "fixed ";
}
</body>
</html>
答案 0 :(得分：0)
设置position:fixed后，您是否为该位置设置了任何样式？
例如
#contact {
/* This will position the form in the top, right */
position: fixed;
top: 0;
right: 0;
/*===============================================*/
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
答案 1 :(得分：0)
您已将太多保证金设置为。形成流出窗口
.form {
max-width: 400px;
width: 100%;
/* removed this
margin-top: -95%;
margin-left: 60%;
*/
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
}
form {
margin: 0;
}