メインビジュアルにCSSで背景画像を指定した際に、ナビゲーションが上に重なってしまう

Question

実現したいこと

• ナビゲーションをメインビジュアルの下に配置する

前提

コーディング初心者です。
HTMLとCSSの練習として、架空の店舗のホームページを制作しています。

メインビジュアルを数枚の画像が入れ替わるアニメーションにしています。(CSSで表示する画像を定義、アニメーション設定)

発生している問題・エラーメッセージ

上の画像が実際にコーディングしているサイトです。
ナビゲーションをメインビジュアルの下に配置したいのですが、メインビジュアルに重なってしまいます。(ついでに、ナビゲーションの文字が中央ぞろえになりません…汗)

該当のソースコード

【HTML】
　　　　　<div class="slider">
			  <div class="image">
				  <img src="img/main_01.jpg">
			  </div>
			  <div class="image">
				<img src="img/main_02.jpg">
			  </div>
			  <div class="image">
				<img src="img/main_03.jpg">
			  </div>
		</div>

		<header class="mainvisual">
			<div class="rogoo">
			   　<h1 class="rogo">
				  <img src="img/rogo.png">
			  　 </h1>
			   　<p class="rogo">
				  <img src="img/scroll.png" width="150px">
			  　 </p>
			</div>
			<div>
			   <nav>
			      <ul>
				     <li><a href="index.html" class="nav_padding">ホーム</a></li>
				     <li><a href="#news" class="nav_padding">お知らせ</a></li>
				     <li><a href="#concept" class="nav_padding">こだわり</a></li>
				     <li><a href="about" class="nav_padding">きこりのぱんやについて</a></li>
				     <li><a href="#menu" class="nav_padding">メニュー</a></li>
				     <li><a href="#shop info" class="nav_padding">店舗情報</a></li>
			      </ul>
			  </nav>
			</div>

		</header>

【CSS】
/* メインビジュアルのスライダー 全体設定*/
.slider{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    z-index: -1;
  }
  
  /* スライダー画像 */
  .slider .image{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  
  /*スライドに表示する画像を定義*/
  .slider .image:nth-of-type(1){
    background-image: url(img/main_01.jpg);
  }
  .slider .image:nth-of-type(2){
    animation-delay: 5s;
    background-image: url(img/main_02.jpg);
  }
  .slider .image:nth-of-type(3){
    animation-delay: 10s;
    background-image: url(img/main_03.jpg);
  }
  
  /*アニメーション設定*/
  .slider .image{
    animation-name: anime;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-duration: 15s; 
  }
  
  /* アニメーション定義 */
  @keyframes anime {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale(1.18);
    }
  }


/* ロゴ */
.rogoo {
    z-index: 1;
    margin-top: 100px;
}

.rogo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


/* ナビゲーション */

nav{
  width: 100%;
  padding: 20px;
background-color: #EED9BD;
}

.nav_padding:hover {
  opacity: 0.3;/* ホバー時透過 */
}

header ul {
  display: flex;
}

header li {
  list-style: none;
}

header a {
  text-decoration: none;
  color: #000;
}

.nav_padding {
  padding-left: 80px;
}

試したこと

.imageにdisplay:blockを指定してブロック要素にしたらもしかして、と思いましたが、変わりませんでした。

調べても解決せず、困っています…。
質問の仕方や、コーディングの面でも拙い部分が多々あるかと思いますが、ご回答いただけますと本当に嬉しいです。

Answer 1

.slider{ position: absolute;

このcssによってスライダー要素の高さが無視されている状態です。
この記述は不要だと思いますので削除することと、HTML構造を見直してください。
absoluteで絶対位置を指定するのであれば、親要素にrelativeをセットで使用することをオススメします。

<div class="mainvisual">
	<div class="slider">
		...
	</div>
	<div class="rogoo">
		...
	</div>
</div>

<header>
	...
</header>

ナビゲーションの中央配置は以下で可能です。

header ul {
  display: flex;
  justify-content: center;
}