アコーディオンメニューと違う要素との重なりについて

前提・実現したいこと

横並びのアコーディオンメニューを実装して、
その下に、スライダーでトップ画面を動かしたいです。

アコーディオンメニューの一番上の部分までが、トップイメージにかかってしまいます。
緑の点線のボーダーボックスは写真の上に来るようにしたいのです。

該当のソースコード

長いのでテストページをアップしました。

★HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webサイトのタイトル</title>
<meta name="description" content="ページの紹介文">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- webfont -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,500,900&amp;subset=japanese" rel="stylesheet">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<!-- slider-pro -->
<link rel="stylesheet" type="text/css" href="slider-pro/slider-pro.min.css">
<script type="text/javascript" src="slider-pro/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="slider-pro/jquery.sliderPro.min.js"></script>
<script type="text/javascript" src="slider-pro/jquery.settei.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/destyle.css">
<link rel="stylesheet" href="css/style.css" media="screen and (min-width: 481px)">
<link rel="stylesheet" href="css/sp.css" media="screen and (max-width: 480px)">
</head>

<body>
<div class="wrapper">
  <header>
    <div class="header"> </div>
    
    <!--ナビゲーション-->
    <nav role="navigation">
      <ul>
        <li class="menu-item-has-children"> <a href="#">Coding ▼</a>
          <ul class="sub-menu">
            <li><a href="#">CSS</a></li>
            <li><a href="#">HTML5</a></li>
            <li><a href="#">WordPress</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">SVG</a></li>
          </ul>
        </li>
        <li class="menu-item-has-children"> <a href="#">Design ▼</a>
          <ul class="sub-menu">
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Fonts</a></li>
            <li><a href="#">Colour</a></li>
          </ul>
        </li>
        <li><a href="#">Tips</a></li>
        <li><a href="#">For Beginner</a></li>
      </ul>
    </nav>
    <!--ナビゲーションここまで--> 
  </header>
  <div class="top_img_bg">
    <div class="top_img">
      <div id="slider-pro" class="slider-pro" >
        <div class="sp-slides">
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/01_pc.png" data-small="images/main_photo/01_sp.png" ></div>
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/02_pc.png" data-small="images/main_photo/02_sp.png" ></div>
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/03_pc.png" data-small="images/main_photo/03_sp.png" ></div>
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/04_pc.png" data-small="images/main_photo/04_sp.png" ></div>
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/04_pc.png" data-small="images/main_photo/05_sp.png" ></div>
        </div>
      </div>
    </div>
  </div>
  <div class="container"> </div>
  <footer class="footer_bg">
    <div class="footer_conts"> </div>
  </footer>
  <div class="copyright">copyrightc2020 .</div>
</div>
<div id="page_top"><a href="#"></a></div>
<script>
$(function() {
  $('.menu-item-has-children a').focus( function () {
    $(this).siblings('.sub-menu').addClass('focused');
  }).blur(function(){
    $(this).siblings('.sub-menu').removeClass('focused');
  });

// サブメニュー用
  $('.sub-menu a').focus( function () {
    $(this).parents('.sub-menu').addClass('focused');
  }).blur(function(){
    $(this).parents('.sub-menu').removeClass('focused');
  });
});
</script>
</body>
</html>



@charset "utf-8";
/* CSS Document */

html {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 62.5%;
	box-sizing: border-box;
}

img {
	margin:0;
	padding:0;
	border:0;
	width: 100%;
	height: auto;

}

.clearfloat {
	clear:both;
	height:0px;
	font-size: 1px;
	line-height: 0px;
}

a{
	color:#929D00;
}
a:hover {
		opacity: 0.75;
}
p {
	padding: 0;
	margin: 0;
}
ul {
	list-style: none;
	margin:  0;
	padding: 0;
}
h1, h2, h3, h4 {
	font-weight: normal;
}

/* ；；；；；；；；；；；；；；；；；；；；；；；
共通
；；；；；；；；；；；；；；；；；；；；；；；*/

.p_14 {
	font-size: 1.4rem;
}

.mb05{
	margin-bottom: .5em;
}

.mb1{
	margin-bottom: 1em;
}

.mb2{
	margin-bottom: 2em;
}

.mb3{
	margin-bottom: 3em;
}

.mb4{
	margin-bottom: 4em;
}

.mb5{
	margin-bottom: 5em;
}
/* ；；；；；；；；；；；；；；；；；；；；；；；
構造
；；；；；；；；；；；；；；；；；；；；；；；*/

header {
	width: 1110px;
	margin: 0 auto;
}
.container {
	width: 1110px;
	margin: 0 auto;
}
.main {
	width: 75%;
	margin-bottom: 40px;
	float: left;
}
.side {
	width: 25%;
	float: right;
}
.footer_bg {
	background-image: url("../images/footer_bg.png");
	background-repeat: repeat;
	min-width:1110px;
	border-bottom: solid 20px #85D0C5;
}
.wrapper {
	background-color: #ffffff;
	color: #4D4D4D;
	line-height: 170%;
	font-size: 1.4rem;
}
/* ナビ */
nav {
  font: 18px/1.7 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ","ＭＳ Ｐゴシック",Helvetica,Sans-Serif;
	width: 1110px;
	height: 65px;
	border: 2px dashed #46B793;
	position: fixed;
	z-index: 99999;
}

/* 親メニュー - Parent nav */
nav > ul > li {
  position: relative;
  float: left;
  margin-right: 45px;
}
nav a {
  color: #0bd;
  text-decoration: none;
}
nav ul a:hover {
  color: #0090aa;
}

/* 子メニュー - .sub-menu */
nav .sub-menu {
  position: absolute;
  width: 180px;
  background: #0bd;
  top: 30px;
  display: none;
}
nav .sub-menu a {
  color: #fff;
  padding: 10px 15px;
  display: block;
}
nav .sub-menu a:hover {
  color: #fff;
}

/* ホバー＆フォーカスで子メニュー表示 */
/* Display sub menu by hover & focus */
nav .menu-item-has-children:hover ul,
nav .menu-item-has-children ul.focused {
  display: block;
}
nav li.menu-item-has-children li a:hover,
nav li.menu-item-has-children li a:focus {
  background: #0090aa;
}
nav .menu-item-has-children:hover ul,
nav .menu-item-has-children ul.focused {
  display: block;
}
nav li.menu-item-has-children li a:hover,
nav li.menu-item-has-children li a:focus {
  background: #0090aa;
}
.top_img {
	max-width:1110px;
	margin: 0 auto;
	min-height: 370px;
}
.top_img img {
	width: 1110px;
	height: 370px;
}
.top_img_bg {
	background-image: url("../images/top_bg.svg");
	background-repeat:repeat;
}

hatena19

2020/08/05 22:08

コードはマークダウン記法のコードブロックにいれてください。コードを選択してツールバーの <code> を選択するとコードブロックになり読みやすくなります。

yuinana123

2020/08/05 23:46

ご指摘ありがとうございます。読みづらすぎると思って、テストサイトにアップしたのですが、こうすれば読みやすくなるんですね。勉強になりました^^

hatena19

2020/08/06 00:42

実際のサイトのURLを提示してもらうのも検証の助けになります。コードをもとに検証のためのサンプルを作成する手間が省けますので。両方とも提示してもらうのがベストですね。

yuinana123

2020/08/06 06:42

ありがとうございます。実は延々と悩んでしまうタイプなので、今回は本当に助かりました。わかりやすく質問＆質問項目のサンプルサイトを作るようにしていきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

ナビゲーション(nav)をposition: fixed;で固定してますが、こうするとこのブロックは他の要素からは存在しないことになります。浮いた状態ということです。
そのため、その親の要素（header）は中身がないことになり高さが0になるので、下の要素（スライダー）と重なります。
ということで、親の要素（header）に適切な高さを設定すればいいでしょう。

css
1header {
2  width: 1110px;
3  margin: 0 auto;
4  height: 70px; /* 追加 数値は調節してください。 */
5}

投稿2020/08/05 22:18

hatena19

総合スコア33790

yuinana123

2020/08/05 22:45 編集

うまくいきました！！！実はここが分からなくて昨日何時間も格闘していました。本当にありがとうございましたm(__)m

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！