1
私は比較的新しいコーディングをしていますが、私は研究を行っており、私を助けてくれるものは何も見つかりませんでした。私は現在視差を使ってウェブサイトを作っていますが、視差を得ている間は何もありません。実装されている他のすべてのコンテンツは、位置やZインデックスを何回変更しても、位置が固定されているかのように上に固定されます（上に固定することを目的としたナビゲーションバーは表示されません）。助けてください、これは巨大な混乱のように感じ始めています。Parallaxの実装後にdivの位置づけが実装されていません
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のような他のコンテンツは修正するべきではありません。 –