首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >不能将div定位在我想要的位置

不能将div定位在我想要的位置
EN

Stack Overflow用户
提问于 2018-12-19 23:21:59
回答 3查看 65关注 0票数 0

嘿,伙计们,我正在做墨西哥网站的小时部分。我把它都写在一页上,所以你只需向下滚动就可以看到所有的部分。当我完成“关于”部分时,我使用了边距-top:-300 to在我需要它的地方拉出该部分,但是这并不适用于“小时”部分。之前的菜单部分把它推得太低了,造成了不必要的空间吗?我不知道怎么解决这个问题!?https://codepen.io/spabsa/pen/mKZWQa

我必须包含代码,因为我有一个代码链接,但是我有太多的代码,这就是为什么我包含了这个链接,所以这里有一些不完整的代码lol

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>El Metate | Mexican Food</title>
	<link rel="stylesheet" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Kumar+One+Outline|Teko" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Diplomata+SC|Ewert|Sarina|Smokum" rel="stylesheet">
	<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
	<section id="header">
		<div class="container">
			<div class="nav-btn">
				<div class="btn-1"></div>
				<div class="btn-2"></div>
				<div class="btn-3"></div>
			</div>	
				<div class="side-menu">
					<ul>
						<i class="fas fa-times"></i>
						<li><a href="#header">Home</a></li>
						<li><a href="#about">About</a></li>
						<li><a href="#menu">Menu</a></li>
						<li><a href="#hours">Hours</a></li>
						<li><a href="#contact">Contact</a></li>
						<li><a href="#news">News</a></li>
					</ul>
				</div>
			<p><span class="auth">Authentic</span><span class="mexi">Mexican</span><span class="food">Food</span></p>
			<img src="img/LogoMakr_Oso9xi.png" alt="">
		</div>
	</section>

	<section id="about">
		<div class="container">
			<div class="line"></div>
			<h1>About us</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, quis, adipisci! Unde natus quas officiis, earum commodi! Voluptate in modi alias quisquam maiores sunt fugit reprehenderit odio rem obcaecati libero repellat saepe quidem quibusdam impedit labore error velit, possimus necessitatibus. Optio ullam, officiis, sit ipsa fugiat animi voluptas labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, et.</p>
			<div class="image-slider">
				<i class="fas fa-caret-down left"></i>
				<i class="fas fa-caret-down right"></i>
			</div>
		</div>
	</section>

	<section id="menu">
		<div class="container">
			<div class="left-border">
				<div class="shape-wrap">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
				<div class="shape-wrap" style="top: 385px;">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
				<div class="shape-wrap" style="top: 770px;">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
				<div class="shape-wrap" style="top: 1155px;">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
				<div class="shape-wrap" style="top: 1540px;">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
				<div class="shape-wrap" style="top: 1925px;">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
				<div class="shape-wrap" style="top: 2310px;">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
			</div>

			<div class="right-border">
				<div class="shape-wrap">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
				<div class="shape-wrap" style="top: 385px;">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
				<div class="shape-wrap" style="top: 770px;">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
				<div class="shape-wrap" style="top: 1155px;">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
				<div class="shape-wrap" style="top: 1540px;">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
				<div class="shape-wrap" style="top: 1925px;">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
				<div class="shape-wrap" style="top: 2310px;">
					<span class="shape-1"></span>
					<span class="shape-2"></span>
					<span class="shape-3"></span>
					<span class="shape-4"></span>
					<span class="shape-5"></span>
					<span class="shape-6"></span>
					<span class="shape-7"></span>
					<span class="shape-8"></span>
					<span class="shape-9"></span>
					<span class="shape-10"></span>
				</div>
			</div>

			<h1>Menu</h1>
			<div class="line-2"></div>

			<div class="vexel-images"></div>

			<div class="col-1">
				<h3 class="platter">Combination Platters</h3>
				<p class="platter-info">Rice & Beans Included</p>

				<p class="item item-1">Tostada & Taco</p><span class="price p1"><span class="s1">$</span>6.39</span>
				<p class="item item-2">2 Beef Tacos</p><span class="price p2"><span class="s1">$</span>6.39</span>
				<p class="item item-3">2 Enchiladas</p><span class="price p3"><span class="s1">$</span>6.39</span>
				<p class="item item-4">Tostada & Enchilada</p><span class="price p4"><span class="s1">$</span>6.39</span>
				<p class="item item-5">Taco & Enchilada</p><span class="price p5"><span class="s1">$</span>6.39</span>
				<p class="item item-6">Burrito & Enchilada</p><span class="price p6"><span class="s1">$</span>6.39</span>
				<p class="item item-7">2 Beef Burritos</p><span class="price p7"><span class="s1">$</span>7.45</span>
				<p class="item item-8">2 Carne Asada Tacos</p><span class="price p8"><span class="s1">$</span>8.09</span>
				<p class="item item-9">Chorizo</p><span class="price p9"><span class="s1">$</span>6.39</span>
				<p class="item item-10">Carne Asada</p><span class="price p10"><span class="s1">$</span>8.19</span>
				<p class="item item-11">Machaca</p><span class="price p11"><span class="s1">$</span>6.75</span>
				<p class="item item-12">Carnitas</p><span class="price p12"><span class="s1">$</span>7.19</span>
				<p class="item item-13">2 Fish Tacos</p><span class="price p13"><span class="s1">$</span>6.75</span>
				<p class="item item-14">Chiles Rellenos</p><span class="price p14"><span class="s1">$</span>6.95</span>
				<p class="item item-15">Red Combo</p><span class="price p15"><span class="s1">$</span>7.95</span>
				<p class="item item-16">Green Combo</p><span class="price p16"><span class="s1">$</span>7.05</span>
				<p class="item item-17">3 Rolled Tacos w/Guacamole</p><span class="price p17"><span class="s1">$</span>6.75</span>
				<p class="item item-18">Chimichanga, Rice & Beans</p><span class="price p18"><span class="s1">$</span>7.05</span>
				<p class="item item-19">Carne Asada Burrito</p><span class="price p19"><span class="s1">$</span>7.19</span>
				<p class="item item-20">2 Tamales, Rice & Beans</p><span class="price p20"><span class="s1">$</span>7.05</span>

				<h3 class="platter plat-4">Tacos</h3>
				<p class="platter-info info4tacos">Folded</p>

				<p class="item item-21">1 Chicken Taco</p><span class="price p21"><span class="s1">$</span>2.09</span>
				<p class="item item-22">1 Beef</p><span class="price p22"><span class="s1">$</span>2.09</span>
				<p class="item item-23">1 Carne Asada</p><span class="price p23"><span class="s1">$</span>2.61</span>
				<p class="item item-21">1 Fish</p><span class="price p21"><span class="s1">$</span>2.64</span>
				<p class="item item-22">1 Carnitas</p><span class="price p22"><span class="s1">$</span>2.64</span>
				<p class="item item-23">1 Adobada</p><span class="price p23"><span class="s1">$</span>2.64</span>
				<p class="item item-23">1 Cabeza</p><span class="price p23"><span class="s1">$</span>2.64</span>

				<p class="platter-info info4tacos">Rolled</p>

				<p class="item item-21">3 Plain with Cheese</p><span class="price p21"><span class="s1">$</span>2.39</span>
				<p class="item item-22">3 Cheese and Guacamole</p><span class="price p22"><span class="s1">$</span>2.89</span>
				<p class="item item-23">3 Chicken w/Cheese and Guacamole</p><span class="price p23"><span class="s1">$</span>2.89</span>
				<p class="item item-21">3 Tacos w/Cheese and Guacamole</p><span class="price p21"><span class="s1">$</span>3.99</span>
				<p class="item item-22">12 Tacos w/Cheese and Guacamole</p><span class="price p22"><span class="s1">$</span>8.99</span>

				<h3 class="platter plat-7">Tortas</h3>

				<p class="item item-21">Carne Asada</p><span class="price p21"><span class="s1">$</span>2.09</span>
				<p class="item item-22">Machaca</p><span class="price p22"><span class="s1">$</span>2.09</span>
				<p class="item item-23">Ham</p><span class="price p23"><span class="s1">$</span>2.61</span>
				<p class="item item-21">Chorizo</p><span class="price p21"><span class="s1">$</span>2.64</span>
				<p class="item item-22">Chicken</p><span class="price p22"><span class="s1">$</span>2.64</span>
				<p class="item item-23">Carnitas</p><span class="price p23"><span class="s1">$</span>2.64</span>
				<p class="item item-23">Fish</p><span class="price p23"><span class="s1">$</span>2.64</span>

				<h3 class="platter plat-8">Breakfast Served Everyday</h3>
				<p class="platter-info info4breakfast">6am to 11am</p>

				<h3 class="platter plat-9">Breakfast Plates</h3>
				
				<p class="item item-21">Huevos Racheros</p><span class="price p21"><span class="s1">$</span>6.29</span>
				<p class="item item-22">Steaks Racheros</p><span class="price p22"><span class="s1">$</span>6.95</span>
				<p class="item item-22">Scrambled Eggs w/Ham</p><span class="price p22"><span class="s1">$</span>5.95</span>
				<p class="item item-22">Scrambled Eggs w/Suasage</p><span class="price p22"><span class="s1">$</span>5.95</span>
				<p class="item item-22">Chorizo Omelette</p><span class="price p22"><span class="s1">$</span>6.95</span>
				<p class="item item-22">Carne Asada Omelette</p><span class="price p22"><span class="s1">$</span>7.95</span><p class="item item-22">Scrambled Eggs w/Ham</p><span class="price p22"><span class="s1">$</span>5.95</span>
				<p class="item item-22">Eggs and Bacon</p><span class="price p22"><span class="s1">$</span>5.95</span>
			</div>

			<div class="col-2">
				<h3 class="platter plat-2">Enchiladas</h3>

				<p class="item item-21">2 Cheese</p><span class="price p21"><span class="s1">$</span>4.55</span>
				<p class="item item-22">2 Beef</p><span class="price p22"><span class="s1">$</span>4.65</span>
				<p class="item item-23">2 Chicken</p><span class="price p23"><span class="s1">$</span>3.55</span>

				<h3 class="platter plat-3">Side Orders</h3>

				<p class="item item-24">Carne Asada Fries</p><span class="price p24"><span class="s1">$</span>4.55</span>
				<p class="item item-25">Jalepenos</p><span class="price p25"><span class="s1">$</span>4.65</span>
				<p class="item item-26">Quesadilla</p><span class="price p26"><span class="s1">$</span>3.55</span>
				<p class="item item-27">Ham Quesadilla</p><span class="price p27"><span class="s1">$</span>4.55</span>
				<p class="item item-28">1/2 Pint of Beans</p><span class="price p28"><span class="s1">$</span>4.65</span>
				<p class="item item-29">1/2 Pint of rice</p><span class="price p29"><span class="s1">$</span>3.55</span>
				<p class="item item-30">Ham Quesadilla</p><span class="price p30"><span class="s1">$</span>4.55</span>
				<p class="item item-31">Super Nachos</p><span class="price p31"><span class="s1">$</span>4.65</span>
				<p class="item item-32">1 Tamale</p><span class="price p32"><span class="s1">$</span>3.55</span>
				<p class="item item-33">Extra Cheese Quacamole</p><span class="price p33"><span class="s1">$</span>4.55</span>
				<p class="item item-34">Supreme Quesadilla</p><span class="price p34"><span class="s1">$</span>4.65</span>
				<p class="item item-35">Chips and Quacamole</p><span class="price p35"><span class="s1">$</span>3.55</span>
				<p class="item item-36">1 Chiles Rellano</p><span class="price p36"><span class="s1">$</span>4.55</span>
				<p class="item item-37">Chips & Salsa</p><span class="price p37"><span class="s1">$</span>4.65</span>
				<p class="item item-38">Churros</p><span class="price p38"><span class="s1">$</span>3.55</span>
				<p class="item item-39">Burrito Asada R&B</p><span class="price p39"><span class="s1">$</span>4.55</span>
				<p class="item item-40">1/2 Pint of Beans</p><span class="price p40"><span class="s1">$</span>4.65</span>
				<p class="item item-41">1/2 Pint of rice</p><span class="price p41"><span class="s1">$</span>3.55</span>

				<h3 class="platter plat-5">Tostadas</h3>

				<p class="item item-38">Beef</p><span class="price p38"><span class="s1">$</span>2.85</span>
				<p class="item item-39">Chicken</p><span class="price p39"><span class="s1">$</span>2.85</span>
				<p class="item item-40">Bean</p><span class="price p40"><span class="s1">$</span>2.49</span>

				<h3 class="platter plat-6">Burritos</h3>

				<p class="item item-38">Red Chili</p><span class="price p38"><span class="s1">$</span>4.49</span>
				<p class="item item-39">Carne Asada</p><span class="price p39"><span class="s1">$</span>4.90</span>
				<p class="item item-40">California</p><span class="price p40"><span class="s1">$</span>4.90</span>
				<p class="item item-38">Machaca</p><span class="price p38"><span class="s1">$</span>4.19</span>
				<p class="item item-39">Mixed</p><span class="price p39"><span class="s1">$</span>4.19</span>
				<p class="item item-40">Beef</p><span class="price p40"><span class="s1">$</span>4.19</span>
				<p class="item item-38">Chicken</p><span class="price p38"><span class="s1">$</span>4.19</span>
				<p class="item item-39">Beans</p><span class="price p39"><span class="s1">$</span>1.90</span>
				<p class="item item-40">Fish</p><span class="price p40"><span class="s1">$</span>4.19</span>
				<p class="item item-38">Carnitas</p><span class="price p38"><span class="s1">$</span>4.19</span>
				<p class="item item-39">Chimichanga</p><span class="price p39"><span class="s1">$</span>5.85</span>
				<p class="item item-40">Chile Relleno</p><span class="price p40"><span class="s1">$</span>4.49</span>
				<p class="item item-38">Adobada</p><span class="price p38"><span class="s1">$</span>4.19</span>
				<p class="item item-39">Green Chile</p><span class="price p39"><span class="s1">$</span>4.49</span>
				<p class="item item-40">Shrimp</p><span class="price p40"><span class="s1">$</span>5.65</span>
				<p class="item item-38">Cabeza</p><span class="price p38"><span class="s1">$</span>4.75</span>
				<p class="item item-39">Pollo Asado</p><span class="price p39"><span class="s1">$</span>4.75</span>

				<h3 class="platter plat-10">Breakfast Burritos</h3>
				
				<p class="item item-21">Suasage & Egg</p><span class="price p21"><span class="s1">$</span>4.09</span>
				<p class="item item-22">Ham & Eggs</p><span class="price p22"><span class="s1">$</span>4.09</span>
				<p class="item item-22">Bacon & Eggs</p><span class="price p22"><span class="s1">$</span>4.09</span>
				<p class="item item-22">Steak & Chorizon</p><span class="price p22"><span class="s1">$</span>4.75</span>
				<p class="item item-22">Picodegallo eggs & cheese</p><span class="price p22"><span class="s1">$</span>3.95</span>
				<p class="item item-22">Chorizo & Eggs</p><span class="price p22"><span class="s1">$</span>4.85</span>
				<p class="item item-22">Chorizo & Eggs</p><span class="price p22"><span class="s1">$</span>4.09</span>
			</div>
		</div>
	</section>

	<section id="hours">
		<div class="container">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolorum, cumque quaerat nemo sed animi optio molestias? Minus ipsa expedita fuga eaque, odio animi fugiat! Necessitatibus, cumque non tempore mollitia doloremque quis aliquam assumenda, optio odit maxime, nam laboriosam! Qui, a, veritatis. Nam quos, esse, magni doloribus atque iusto voluptate sunt, asperiores officiis quaerat molestias. Mollitia vitae laudantium veritatis enim id modi minus suscipit, aut itaque nostrum eos odio sunt alias rem distinctio iste cum, voluptatum maxime commodi recusandae ea. Recusandae, dolorem, vel voluptatem sit ex quasi! Porro expedita sapiente ipsa quisquam. Eligendi quam vitae quasi maxime, incidunt nesciunt aliquam dignissimos eius, tempore. Sapiente, libero veritatis. Voluptatem amet labore, consequatur in, nam vitae quasi voluptatum quam illum totam autem, ex sunt. Natus sapiente aliquam porro. Culpa impedit aspernatur, similique, incidunt earum voluptates illum distinctio consequuntur dicta? Accusamus eaque et, vero hic temporibus! Ullam sed repellendus est sit distinctio nulla, iusto ab doloribus modi vel perspiciatis. Animi, distinctio, laborum ducimus numquam mollitia voluptatem nam illo ipsum officia excepturi velit natus eligendi tempora iusto praesentium dolorum suscipit in exercitationem ut eum! Facere, enim! Quos optio in ratione ab necessitatibus animi architecto ea eligendi libero, placeat, saepe modi, soluta suscipit repudiandae nihil eaque exercitationem! Asperiores rem consequuntur tenetur praesentium similique et aliquam natus recusandae, quam itaque nam nostrum tempore dolorem perspiciatis ab quidem amet eaque cupiditate, nesciunt doloremque repellendus eligendi a tempora nulla cumque! Totam esse saepe quaerat quis architecto quod dolorem! Velit natus libero, provident repellat delectus cum nihil cumque, architecto. Dolorem illum asperiores corporis, cupiditate recusandae obcaecati earum natus totam nemo, magni et facere vitae similique dolor qui a, saepe quia veniam. Delectus, dolorem nesciunt tenetur ipsam qui ea accusamus! Eos quis harum explicabo quidem nesciunt magnam tempora reprehenderit tenetur, eaque sed temporibus aliquid, quo vero provident cum id. Dolore, doloremque.
		</div>
	</section>
	<script src="script.js"></script>
</body>
</html>

EN

回答 3

Stack Overflow用户

发布于 2018-12-19 23:36:00

两件事。首先,删除margin-top: -300px的小时部分。其次,您的工时部分不够高,这可能是因为您当前在该部分中没有内容,但至少需要100vh才能使页面滚动到顶部。

看看这个链接

或者您可以简单地使用以下代码:

代码语言:javascript
复制
 #hours .container {
   background-color: #339966;
   width: 100vw;
   /*   margin-top: -300px; */
   min-height: 200vh;
   z-index: 1111;
}
票数 0
EN

Stack Overflow用户

发布于 2018-12-19 23:42:26

只需添加位置:相对于#hours .container

代码语言:javascript
复制
#hours .container {
    background-color: #339966;
    width: 100vw;
    height: 500px;
    margin-top: -300px;
    position: relative;
}

https://codepen.io/anon/pen/QzdbVm

票数 0
EN

Stack Overflow用户

发布于 2018-12-20 07:20:32

使用z索引时,添加位置属性,因为它只在指定位置属性时才有效。

代码语言:javascript
复制
#hours .container {
    background-color: #5f75bd;
    width: 100vw;
    height: 500px;
    margin-top: -300px;
    z-index: 1111;
    display: inline-block;
    position: relative;
}

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53860531

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档