1
所以我對編碼比較陌生,但是我已經完成了我的研究,而且我一直沒能找到任何可以幫助我的東西。我目前正在使用視差的網站上工作,雖然我得到的視差工作,沒有別的。所有其他實現的內容都固定在頂部,就好像位置是固定的一樣(無論導航欄是否打算固定在頂部),無論我改變位置或z-index多少次。請幫助,這開始感覺像一個巨大的混亂。Parallax實施後divs的定位不起作用
body {
\t background-color: #E4DBD6;
}
\t
\t
\t
\t
.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 {
\t background-color: #1A2626;
\t position: absolute;
\t top: 126%;
\t left: 0;
\t right: 0;
\t height: 7000px;
}
.parallax__layer__0 {
\t -webkit-transform: translateZ(-300px) scale(3);
\t transform: translateZ(-300px) scale(3);
\t bottom: -39%;
}
\t
.parallax__layer__1 {
\t -webkit-transform: translateZ(-250px) scale(3);
\t transform: translateZ(-250px) scale(3);
\t left: 440px;
\t bottom: -648px;
}
\t
.parallax__layer__2 {
\t -webkit-transform: translateZ(-150px) scale(1.5);
\t transform: translateZ(-150px) scale(1.5);
\t bottom: -850px;
\t left: 26%;
}
\t
\t \t .parallax__layer__center {
\t -webkit-transform: translateZ(-95px) scale(.5);
\t transform: translateZ(-95px) scale(.5);
\t margin-top: -17%;
\t margin-right: -281%;
\t bottom: -75%;
\t } \t
\t \t
\t .parallax__layer__logo {
\t -webkit-transform: translateZ(-85px) scale(.5);
\t transform: translateZ(-85px) scale(.5);
\t left: 53%;
\t bottom: 70%;
\t }
.parallax__layer__3 {
\t -webkit-transform: translateZ(-75px) scale(1.5);
\t transform: translateZ(-75px) scale(1.5);
\t bottom: -268px;
\t left: 13%;
}
\t
.parallax__layer__corner {
\t -webkit-transform: translateZ(-37px) scale(.5);
\t transform: translateZ(-37px) scale(.5);
\t bottom: -52%;
\t right: -1178px;
}
.parallax__layer__4 {
\t -webkit-transform: translateZ(-20px) scale(1.2);
\t transform: translateZ(-20px) scale(1.2);
\t bottom: -47%;
}
.parallax__layer__6 {
\t -webkit-transform: translateZ(0px) scale(1);
\t transform: translateZ(0px) scale(1);
\t left: 20%;
\t bottom: -59%;
}
\t .nav {
\t position: fixed;
\t z-index: 99;
\t font-family: josefin-sans;
\t font-style: normal;
\t font-weight: 100;
\t font-size: 17px;
\t background-color: #370215;
\t width: 101.6%;
\t color: #F3F3F3;
\t margin-top: -8.7px;
\t left: -32px;
}
\t
\t h1 {
\t \t z-index: 99;
\t \t position: relative;
\t \t
\t }
\t
\t #header {
\t z-index: 99;
\t position: relative;
\t }
\t
\t td#name {
\t text-align: left;
\t font-size: larger;
\t padding-left: 48px;
\t }
\t
\t td#list {
\t \t text-align: right;
\t }
\t
\t
\t 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;
\t background-color: #3C696F;
\t padding-top: 6px;
\t padding-right: 17px;
\t padding-bottom: 6px;
\t padding-left: 17px;
\t border-radius: 0px;
}
\t
\t a:hover {
\t background-color: aliceblue; \t
transition:.6s;
-moz-transition-duration:.6s;
-webkit-transition-duration:.6s;
-o-transition-duration:.6s; \t
\t \t
}
\t
\t #trans-nav {
\t \t list-style-type: none;
\t \t height: auto;
\t \t padding: 0;
\t \t margin: 0;
\t }
\t #trans-nav {
\t \t list-style-type: none;
\t \t height: auto;
\t \t padding: 0;
\t \t margin: 0;
\t }
\t #trans-nav li {
\t \t float: right;
\t \t position: relative;
\t \t margin-top: 4px;
\t \t margin-right: 4px;
\t \t margin-bottom: 4px;
\t \t margin-left: 4px;
\t }
\t #trans-nav li:hover {
\t \t background-position: 0 -40px;
\t }
\t #trans-nav li a {
\t \t display: block;
\t \t padding: 0 15px;
\t \t color: #fff;
\t \t text-decoration: none;
\t \t background-color: #3F121E;
\t }
\t #trans-nav li a:hover {
\t \t color: #a3f1d7;
\t }
\t #trans-nav li ul {
\t \t opacity: 0;
\t \t position: absolute;
\t \t left: 0;
\t \t width: 8em;
\t \t background: #63867f;
\t \t list-style-type: none;
\t \t padding: 0;
\t \t margin: 0;
\t }
\t #trans-nav li:hover ul {
\t \t opacity: 1;
\t }
\t #trans-nav li ul li {
\t \t float: none;
\t \t position: static;
\t \t height: 0;
\t \t line-height: 0;
\t \t background: none;
\t }
\t #trans-nav li:hover ul li {
\t \t height: 30px;
\t \t line-height: 30px;
\t }
\t #trans-nav li ul li a {
\t \t background: #63867f;
\t }
\t #trans-nav li ul li a:hover {
\t \t background: #5a8078;
\t }
\t #trans-nav li {
\t \t -webkit-transition: all 0.2s;
\t }
\t #trans-nav li a {
\t \t -webkit-transition: all 0.5s;
\t }
\t #trans-nav li ul {
\t \t -webkit-transition: all 1s;
\t }
\t #trans-nav li ul li {
\t \t -webkit-transition: height 0.5s;
\t }
<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">
\t <img src="centerhouse1.png">
</div>
<div class=" parallax__layer parallax__layer__logo">
\t <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">
\t \t
<ul id="trans-nav">
\t \t <li><a href="contact">contact</a></li>
\t \t <li><a href="#">more</a>
\t \t <ul>
<li><a href="#">Widgets</a></li>
<li><a href="#">Thingamabobs</a></li>
<li><a href="#">Doohickies</a></li>
</ul> \t
</li>
\t
\t <li><a href="computer repairs">computers</a></li>
\t <li><a href="signs">signs</a></li>
\t <li><a href="printing">printing</a></li>
\t <li><a href="home">home</a></li>
\t </ul>
</td>
</tr>
</tbody>
</table>
</div>
<div id="header">
<h1>header here?</h1>
</div>
雖然導航欄旨在被「固定」頭和可能被實現不應任何其他內容。
從'.nav'刪除'position:fixed' – sol
我的意思是說導航欄是打算固定的,但其他內容(如#header)不應該固定,但它們的行爲就像它們一樣。 –