Q&A
HPの作成を行っています。
右上のメニューが下になってしまい、背景画像に隠れてしまいます。
発生している問題・エラーメッセージ
右上のメニューをスライドする画像の上に配置したいのですが、画像が上になってしまい隠れてしまいます。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Tsubasa Takahashi</title> <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキス"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="img/favicon.ico"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="js/main.js"></script> </head><body> <header id="header"> <nav> <ul> <li><a href="#menu">MENU</a></li> <li><a href="#about">ABOUT</a></li> <li><a href="#SCHEDULE">SCHEDULE</a></li> <li><a href="#RESULTS">RESULTS</a></li> <li><a href="#RESULTS">GALLERY</a></li> <li><a href="#NEWS">NEWS</a></li> <li><a href="#SPONSOR">SPONSOR</a></li> </ul> </nav> <div class="main_imgBox"> <h1><img class="main_logo" src="img/tsubasa_logo.png" alt="logo"> <div class="main_img" style="background-image: url(img/slide_1.JPG)"></div> <div class="main_img" style="background-image: url(img/slide_2.JPG)"></div> <div class="main_img" style="background-image: url(img/slide_3.JPG)"></div> <div class="main_img" style="background-image: url(img/slide_4.JPG)"></div> <div class="main_img" style="background-image: url(img/slide_5.JPG)"></div> </div> </header>
#header {
width: 100%;
min-height: 100vh;
padding: 20px 40px;
position: absolute;
}
.main_logo {
z-index:11;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:50%;
height:auto;
}
.main_img {
z-index:10;
opacity: 0;
width: 100%;
height: 680px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 25s 0s infinite;
animation: anime 25s 0s infinite; }
.main_img:nth-of-type(2) { -webkit-animation-delay: 5s; animation-delay: 5s; } .main_img:nth-of-type(3) { -webkit-animation-delay: 10s; animation-delay: 10s; } .main_img:nth-of-type(4) { -webkit-animation-delay: 15s; animation-delay: 15s; } .main_img:nth-of-type(5) { -webkit-animation-delay: 20s; animation-delay: 20s; }
@keyframes anime {
0% {
opacity: 0;
}
8% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
transform: scale(1.2);
z-index:9;
}
100% { opacity: 0 }
}
@-webkit-keyframes anime {
0% {
opacity: 0;
}
8% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
-webkit-transform: scale(1.2);
z-index:9;
}
100% { opacity: 0 }
}
nav ul {
display: flex;
justify-content: flex-end;
}
nav li {
margin-left: 30px;
}
nav li a {
color: #fff;
font-weight: bold;
transition: all 0.3s ease;
filter: drop-shadow(1px 1px 2px #121212);
}
nav li a:hover {
color: #e03131;
}
ソースコード
### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー
