1
我很努力使頁面上的表格固定到它的當前位置，並不希望它在滾動頁面時移動。它應該始終存在於當前位置。表單{position：fixed}的css樣式不起作用。它會使整個表單從頁面中消失。嘗試不同的技術，但沒有工作。職位：固定; dien't沒有工作的表單元素
甚至嘗試給表單元素{z-index：1000}，但也沒有幫助。 任何幫助，將不勝感激。
.rafting-and-camping{
\t padding-left: 130px;
\t height: 47px;
\t width: 724px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 40px;
\t font-weight: bold;
\t line-height: 47px;
}
.ganga-river-camp-by {
\t padding-left: 130px;
\t height: 48px;
\t width: 500px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t line-height: 24px;
}
.stories {
\t padding-left: 190px;
\t height: 16px;
\t width: 63px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 14px;
\t line-height: 16px;
\t display: inline;
}
.hours {
\t padding-left: 78px;
\t height: 16px;
\t width: 49px;
\t color: #8492A6;
\t font-family: Roboto;
\t font-size: 14px;
\t line-height: 16px;
\t display: inline;
}
.viewed-135-times-tod {
\t padding-left: 78px;
\t height: 19px;
\t width: 171px;
\t color: #8492A6;
\t font-family: Roboto;
\t font-size: 16px;
\t line-height: 19px;
\t display: inline;
}
.starts-from-1600 {
\t padding-left: 420px;
\t height: 42px;
\t width: 174px;
\t color: #3C4858;
\t font-family: "PingFang SC";
\t font-size: 16px;
\t line-height: 22px;
\t display: inline
}
.mask {
\t margin-top: 2%;
\t padding-left: 130px;
\t height: 500.62px;
\t width: 1020px;
}
.rectangle-2 {
\t margin-left: 10%;
\t height: 90px;
\t width: 250px;
\t border: 1px solid #C0CCDA;
\t display: inline-block;
}
.rectangle-3 {
\t height: 90px;
\t width: 250px;
\t border: 1px solid #C0CCDA;
\t display: inline-block;
}
.scuba-price {
\t height: 0.51%;
\t width: 4.53%;
\t color: #3C4858;
\t font-family: "PingFang SC";
\t font-size: 20px;
\t font-weight: 500;
\t line-height: 28px;
}
.bali-scuba-divers {
\t height: 19px;
\t width: 123px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 16px;
\t line-height: 19px;
}
.line-2 {
\t margin-left: 130px;
\t box-sizing: border-box;
\t height: 0.04%;
\t width: 47.34%;
\t border: 1px solid #E5E9F2;
}
.what-to-expect {
\t padding-left: 130px;
\t padding-top: 20px;
\t height: 24px;
\t width: 134px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 500;
\t line-height: 24px;
}
.let-s-sail-in-a-rega {
\t padding-left: 130px;
\t height: 125px;
\t width: 600px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 300;
\t line-height: 25px;
}
.what-s-included {
\t padding-left: 130px;
\t height: 24px;
\t width: 141px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 500;
\t line-height: 24px;
}
.tea-a-vegetarian-l {
\t padding-left: 130px;
\t height: 0.44%;
\t width: 24.77%;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 300;
\t line-height: 24px;
}
.materials-and-tools {
\t padding-left: 130px;
\t height: 71px;
\t width: 606.29px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 300;
\t line-height: 25px;
}
.pre-requisites {
\t padding-left: 130px;
\t height: 24px;
\t width: 124px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 500;
\t line-height: 24px;
}
.all-participants-sho {
\t padding-left: 130px;
\t height: 23px;
\t width: 606.29px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 300;
\t line-height: 23px;
}
.where-we-ll-meet {
\t padding-left: 130px;
\t height: 24px;
\t width: 153px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 500;
\t line-height: 24px;
}
.being-born-in-the-wr {
\t padding-left: 130px;
\t height: 161px;
\t width: 606.29px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 300;
\t line-height: 23px;
}
.rectangle-4 {
\t padding-left: 130px;
\t height: 6.14%;
\t width: 47.34%;
}
.contact-operator {
\t padding-left: 130px;
\t height: 24px;
\t width: 154px;
\t color: #1FB6FF;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 500;
\t line-height: 24px;
}
.cancellation-and-res {
\t padding-left: 130px;
\t height: 0.44%;
\t width: 25.7%;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 500;
\t line-height: 24px;
}
.any-trip-or-experien {
\t padding-left: 130px;
\t height: 48px;
\t width: 606.29px;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 300;
\t line-height: 24px;
}
.notes {
\t padding-left: 130px;
\t height: 0.44%;
\t width: 4.22%;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 500;
\t line-height: 24px;
}
.we-ll-recommend-you {
\t padding-left: 130px;
\t height: 1.32%;
\t width: 47.37%;
\t color: #3C4858;
\t font-family: Roboto;
\t font-size: 20px;
\t font-weight: 300;
\t line-height: 24px;
\t text-align: justify;
}
/*form style*/
.form {
\t max-width: 400px;
\t width: 100%;
\t margin-top: -95%;
\t margin-left: 60%;
\t position: relative;
\t overflow-y: auto;
}
#contact {
\t background: #F9F9F9;
\t padding: 25px;
\t margin: 150px 0;
\t box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#contact h3 {
\t display: block;
\t font-size: 30px;
\t font-weight: 300;
\t margin-bottom: 10px;
}
fieldset {
\t border: medium none !important;
\t margin: 0 0 10px;
\t min-width: 100%;
\t padding: 0;
\t width: 100%;
}
#contact input[type="date"]{
\t width: 93%;
\t border: 1px solid #ccc;
\t background: #FFF;
\t margin: 0 0 5px;
\t padding: 10px;
}
#contact select {
\t width: 100%;
\t border: 1px solid #ccc;
\t background: #FFF;
\t margin: 0 0 5px;
\t padding: 10px;
}
#contact input[type="date"]:hover,
#contact select {
\t -webkit-transition: border-color 0.3s ease-in-out;
\t -moz-transition: border-color 0.3s ease-in-out;
\t transition: border-color 0.3s ease-in-out;
\t border: 1px solid #aaa;
}
#contact button[type="submit"] {
\t cursor: pointer;
\t width: 100%;
\t border: none;
\t background: #4CAF50;
\t color: #FFF;
\t margin: 0 0 5px;
\t padding: 10px;
\t font-size: 15px;
}
#contact button[type="submit"]:hover {
\t background: #43A047;
\t -webkit-transition: background 0.3s ease-in-out;
\t -moz-transition: background 0.3s ease-in-out;
\t transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
\t box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.rectangle-7 {
\t height: 57px;
\t width: 350px;
\t background-color: #273444;
}
.price {
\t height: 42px;
\t width: 87px;
\t color: #FFFFFF;
\t font-family: "PingFang SC";
\t font-size: 30px;
\t font-weight: 500;
\t line-height: 42px;
}
/* form end*/<!DOCTYPE html>
<html lang="en">
<head>
\t <title>TripShire</title>
\t <meta charset="utf-8">
\t <meta name="viewport" content="width=device-width, initial-scale=1">
\t <link rel="stylesheet" type="text/css" href="home.css">
</head>
</script>
<body>
\t <p class="rafting-and-camping">Rafting and camping by the Ganges</p>
\t <p class="ganga-river-camp-by"><b>Ganga River .</b> Camp by the river side and raft through the ice cold ganges</p>
\t <p class="stories">73 Stories</p>
\t <p class="hours">6 hours</p>
\t <p class="viewed-135-times-tod">Viewed 135 times today</p>
\t <p class="starts-from-1600">Starts from ₹1600</p>
\t <img class="mask" src="rafting.jpg">
\t <div class="rectangle-2">
\t \t <p class="scuba-price">₹1200</p>
\t \t <p class="bali-scuba-divers">Bali Scuba Drivers</p>
\t </div>
\t <div class="rectangle-3">
\t \t <p class="scuba-price">₹2500</p>
\t \t <p class="bali-scuba-divers">White Water Tours</p>
\t </div>
\t <div class="rectangle-3">
\t \t <p class="scuba-price">₹1500</p>
\t \t <p class="bali-scuba-divers">Bali Scuba Drivers</p>
\t </div>
\t <div class="rectangle-3">
\t \t <p class="scuba-price">₹3200</p>
\t \t <p class="bali-scuba-divers">Bali Scuba Drivers</p>
\t </div>
\t <hr class="line-2">
\t <h2 class="what-to-expect"><b>What to expect</b></h2>
\t <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>
\t <hr class="line-2">
\t <h2 class="what-s-included"><b>What's included</b></h2>
\t <h3 class="tea-a-vegetarian-l">Tea and a vegetarian lunch</h3>
\t <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>
\t <hr class="line-2">
\t <h3 class="pre-requisites"><b>Pre requisites</b></h3>
\t <p class="all-participants-sho">All participants should be greater than 12 years of age</p>
\t <hr class="line-2">
\t <h2 class="where-we-ll-meet"><b>Where we'll meet</b></h2>
\t <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>
\t </br>
\t Address: Terrace Restaurant, Okura Macau, 28F
\t </p>
\t <img class="rectangle-4" src="rafting.jpg">
\t <p class="contact-operator">Contact Operator</p>
\t <hr class="line-2">
\t <h2 class="cancellation-and-res"><b>Cancellation and rescheduling policy</b></h2>
\t <p class="any-trip-or-experien">Any trip or experience can be canceled and fully refunded within 24 </br> hours of purchase.</p>
\t <hr class="line-2">
\t <h2 class="notes"><b>Notes</b></h2>
\t <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>
\t <!-- Form -->
\t <div class="container form">
\t \t <form id="contact" action="" method="post" >
\t \t <h3 class="rectangle-7">₹2500 per person</h3>
\t \t <fieldset>
\t \t \t \t <p>Choose your date</p>
\t \t \t <input type="date" tabindex="1" required autofocus>
\t \t </fieldset>
\t \t <fieldset>
\t \t \t <p>Guests</p>
\t \t \t <select id="guests" name="guests">
\t \t \t \t <option value="australia">5 guest</option>
\t \t \t \t <option value="canada">4 guest</option>
\t \t \t \t <option value="usa">3 guest</option>
\t \t \t \t <option value="usa">2 guest</option>
\t \t \t \t <option value="usa">1 guest</option>
\t \t \t </select>
\t \t \t </fieldset>
\t \t <fieldset>
\t \t \t <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
\t \t </fieldset>
\t \t </form>
\t </div>
\t <!-- form end -->
\t <script>
\t window.onscroll = function() {myFunction()};
\t function myFunction() {
\t \t document.getElementById("contact").style.postion = "fixed \t ";
\t }
</body>
</html>
的瀏覽整頁模式輸出。 – sarj7