html - 实现视差后 div 的定位不起作用

Question

所以我对编码还比较陌生，但我已经完成了研究，但没能找到任何对我有帮助的东西。我目前正在使用视差的网站上工作，虽然我让视差起作用，但没有别的。无论我更改位置或 z-index 多少次，实现的所有其他内容都会粘在顶部，就好像位置是固定的一样(没有导航栏，它旨在固定在顶部)。请帮忙，这开始感觉像是一团糟。

body {
	background-color: #E4DBD6;
}
	
	
	
	

.parallax {
  -webkit-perspective: 100px;
          perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  margin-left: -1500px;
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
}
.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
  
}

.parallax__cover {
	background-color: #1A2626;
	position: absolute;
	top: 126%;
	left: 0;
	right: 0;
	height: 7000px;
}

.parallax__layer__0 {
	-webkit-transform: translateZ(-300px) scale(3);
	transform: translateZ(-300px) scale(3);
	bottom: -39%;
}

	
.parallax__layer__1 {
	-webkit-transform: translateZ(-250px) scale(3);
	transform: translateZ(-250px) scale(3);
	left: 440px;
	bottom: -648px;
}


	
.parallax__layer__2 {
	-webkit-transform: translateZ(-150px) scale(1.5);
	transform: translateZ(-150px) scale(1.5);
	bottom: -850px;
	left: 26%;
}
	

		.parallax__layer__center {
	-webkit-transform: translateZ(-95px) scale(.5);
	transform: translateZ(-95px) scale(.5);
	margin-top: -17%;
	margin-right: -281%;
	bottom: -75%;
	}	
		
	.parallax__layer__logo {
	-webkit-transform: translateZ(-85px) scale(.5);
	transform: translateZ(-85px) scale(.5);
	left: 53%;
	bottom: 70%;
	} 

.parallax__layer__3 {
	-webkit-transform: translateZ(-75px) scale(1.5);
	transform: translateZ(-75px) scale(1.5);
	bottom: -268px;
	left: 13%;
}
	
.parallax__layer__corner {
	-webkit-transform: translateZ(-37px) scale(.5);
	transform: translateZ(-37px) scale(.5);
	bottom: -52%;
	right: -1178px;
}


.parallax__layer__4 {
	-webkit-transform: translateZ(-20px) scale(1.2);
	transform: translateZ(-20px) scale(1.2);
	bottom: -47%;
}


.parallax__layer__6 {
	-webkit-transform: translateZ(0px) scale(1);
	transform: translateZ(0px) scale(1);
	left: 20%;
	bottom: -59%;
}

	.nav {
	position: fixed;
	z-index: 99;
	font-family: josefin-sans;
	font-style: normal;
	font-weight: 100;
	font-size: 17px;
	background-color: #370215;
	width: 101.6%;
	color: #F3F3F3;
	margin-top: -8.7px;
	left: -32px;
}
	
	h1 {
		z-index: 99; 
		position: relative;
		
	}
	
	#header {
	z-index: 99;
	position: relative;
	}

	
	td#name {
	text-align: left;
	font-size: larger;
	padding-left: 48px;
	}
	
	td#list {
		text-align: right;
	}
	
	
	a:link, a:visited, a:active {
    color:#fff;
    text-decoration: none;
    transition:.6s;
    -moz-transition-duration:.6s;
    -webkit-transition-duration:.6s;
    -o-transition-duration:.6s;
	background-color: #3C696F;
	padding-top: 6px;
	padding-right: 17px;
	padding-bottom: 6px;
	padding-left: 17px;
	border-radius: 0px;
}
	
	a:hover {
	background-color: aliceblue;	
    transition:.6s;
    -moz-transition-duration:.6s;
    -webkit-transition-duration:.6s;
    -o-transition-duration:.6s;	
		
}
	

	#trans-nav { 
		list-style-type: none; 
		height: auto; 
		padding: 0; 
		margin: 0; 
	}

	#trans-nav { 
		list-style-type: none; 
		height: auto; 
		padding: 0; 
		margin: 0; 
	}

	#trans-nav li {
		float: right;
		position: relative;
		margin-top: 4px;
		margin-right: 4px;
		margin-bottom: 4px;
		margin-left: 4px;
	}

	#trans-nav li:hover { 
		background-position: 0 -40px; 
	}

	#trans-nav li a {
		display: block;
		padding: 0 15px;
		color: #fff;
		text-decoration: none;
		background-color: #3F121E;
	}

	#trans-nav li a:hover { 
		color: #a3f1d7; 
	}

	#trans-nav li ul { 
		opacity: 0; 
		position: absolute; 
		left: 0; 
		width: 8em; 
		background: #63867f; 
		list-style-type: none; 
		padding: 0; 
		margin: 0; 
	}

	#trans-nav li:hover ul { 
		opacity: 1; 
	}

	#trans-nav li ul li { 
		float: none; 
		position: static; 
		height: 0; 
		line-height: 0; 
		background: none;
	}

	#trans-nav li:hover ul li { 
		height: 30px; 
		line-height: 30px; 
	}

	#trans-nav li ul li a { 
		background: #63867f; 
	}

	#trans-nav li ul li a:hover { 
		background: #5a8078; 
	}

	#trans-nav li { 
		-webkit-transition: all 0.2s; 
	}

	#trans-nav li a { 
		-webkit-transition: all 0.5s;
	}

	#trans-nav li ul { 
		-webkit-transition: all 1s; 
	}

	#trans-nav li ul li { 
		-webkit-transition: height 0.5s; 
	}

<div class="parallax">
 
 
  <div class="parallax__layer parallax__layer__0">
    <img src="hills0.png">
  </div>
  
  <div class="parallax__layer parallax__layer__1">
    <img src="hills1.png">
  </div>
  
  <div class="parallax__layer parallax__layer__2">
    <img src="hills2.png">
  </div>
  
    <div class=" parallax__layer parallax__layer__center">
  	<img src="centerhouse1.png">
  </div>
  
  <div class=" parallax__layer parallax__layer__logo">
  	<img src="final.png">
  </div>
  
  <div class="parallax__layer parallax__layer__3">
    <img src="hills3.png">
  </div>
  
   <div class="parallax__layer parallax__layer__corner">
   <img src="cornerhousewatercolor.png">
  </div>
  
  <div class="parallax__layer parallax__layer__4">
    <img src="hills4.png">
  </div>
  
  <div class="parallax__layer parallax__layer__6">
   <img src="hills5.png">
  </div>
 
  
  <div class="parallax__cover">
  </div>  

</div>

  <div class="nav">
<table width="100%" border="0" align="center">
  <tbody>
    <tr>
      <td id="name" style="text-align: left">the gateways</td>
      <td id="list" style="text-align:center">       
     		
   <ul id="trans-nav">
     		<li><a href="contact">contact</a></li>
      		<li><a href="#">more</a>
      		<ul>
            <li><a href="#">Widgets</a></li>
            <li><a href="#">Thingamabobs</a></li>
            <li><a href="#">Doohickies</a></li>
            </ul>	
    </li>
     	
     	<li><a href="computer repairs">computers</a></li>
     	<li><a href="signs">signs</a></li>
     	<li><a href="printing">printing</a></li>
     	<li><a href="home">home</a></li>

      	</ul>
      </td>
    </tr>
  </tbody>
</table>
  </div>
  
  <div id="header">
<h1>header here?</h1>
</div>

虽然导航栏旨在“固定”，但标题和可能实现的任何其他内容不应该是。

Answer 1

想通了!我需要完全摆脱 .parallax 容器并将视差包裹在 body 本身中。不幸的是现在我需要回去调整一切，但问题已经解决，我终于可以继续前进了!