position: fixed; diesn't work for the form element - html

Question

I am struggling to make the form on the page fixated to it's current position and doesn't want it to move while scrolling the page. it should be there always at it's current position. the css styling for the form {position: fixed} doesn't work. it makes the whole form disappear from the page. Tried different techniques but none did worked.
even tried giving the form element a {z-index: 1000} but that also didn't helped.
any help would be appreciated.
.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>

Answer 1

Did you set any styles for the position after setting position:fixed?
eg.
#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);
}

Answer 2

You have set too much margin to .form that it flows out of window
.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;
}