位置：固定;不适用于表单元素

时间：2017-10-08 12:10:08

标签： html css

我正在努力使页面上的表单固定在当前位置，并且不希望它在滚动页面时移动。应该总是在它当前的位置。表单{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 &#8377;1600</p>

	<img class="mask" src="rafting.jpg">

	<div class="rectangle-2">
		<p class="scuba-price">&#8377;1200</p>
		<p class="bali-scuba-divers">Bali Scuba Drivers</p>
	</div>
	<div class="rectangle-3">
		<p class="scuba-price">&#8377;2500</p>
		<p class="bali-scuba-divers">White Water Tours</p>
	</div>
	<div class="rectangle-3">
		<p class="scuba-price">&#8377;1500</p>
		<p class="bali-scuba-divers">Bali Scuba Drivers</p>
	</div>
	<div class="rectangle-3">
		<p class="scuba-price">&#8377;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">&#8377;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>

2 个答案:

答案 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;
 }
相关问题
最新问题