header要素に背景画像の上にlogoとnavigationを配置するにはどのように行えばいいでしょうか？

前提・実現したいこと

いつも設定する方法ですが背景画像に対してposition:relative;
にしてからheader-containerの親要素に対してposition: absoluteで配置を整えております。
positionを使わずに設定する方法はないでしょうか？

該当のソースコード

html
1      <header>
2        <div class="header-bg">
3        <div class="header-container">
4          <div class="header-logo">
5            <h1 class="logo">
6              <a href="" class="logo-link">
7                <img src="img/logo.png" alt="LOGO">
8              </a>
9            </h1>
10          </div>
11          <nav class="globalnav">
12            <ul class="menu">
13              <li><a href="">Top</a></li>
14              <li><a href="">Menu</a></li>
15              <li><a href="">About</a></li>
16              <li><a href="">Conpany</a></li>
17              <li><a href="">Contact</a></li>
18            </ul>
19          </nav>
20          <div class="nav-toggle">
21            <div>
22              <span></span>
23              <span></span>
24              <span></span>
25            </div>
26          </div><!--/nav-toggle-->
27          <div id="js-black-bg" class="black-bg"></div><!--/js-black-bg-->
28        </div><!--/header-container-->
29      </div>
30      </header><!--/header-->

css
1/* header */
2header #header_bg {
3  background-image: url("../img/header_bg.png");
4  background-repeat: no-repeat;
5  background-size: cover;
6  background-position: center;
7  padding-top: 61%;
8  position: relative;
9}
10
11header #header_bg .header_container {
12  max-width: 1340px;
13  width: 95%;
14  margin-left: auto;
15  margin-right: auto;
16  display: -webkit-box;
17  display: -webkit-flex;
18  display: -moz-box;
19  display: -ms-flexbox;
20  display: flex;
21  -webkit-box-pack: justify;
22  -webkit-justify-content: space-between;
23     -moz-box-pack: justify;
24      -ms-flex-pack: justify;
25          justify-content: space-between;
26  -webkit-box-align: center;
27  -webkit-align-items: center;
28     -moz-box-align: center;
29      -ms-flex-align: center;
30          align-items: center;
31  padding: 30px 0;
32  position: absolute;
33  top: 8%;
34  left: 50%;
35  -webkit-transform: translateY(-50%) translateX(-50%);
36     -moz-transform: translateY(-50%) translateX(-50%);
37          transform: translateY(-50%) translateX(-50%);
38}
39
40header #header_bg .header_container .header_logo h1.logo {
41  width: 220px;
42}
43
44header #header_bg .header_container .header_logo h1.logo a img {
45  width: 45%;
46}
47
48header #header_bg .header_container nav.globalnav ul.menu {
49  display: -webkit-box;
50  display: -webkit-flex;
51  display: -moz-box;
52  display: -ms-flexbox;
53  display: flex;
54}
55
56@media screen and (min-width: 768px) {
57  header #header_bg .header_container .nav_toggle {
58    display: none;
59  }
60}
61
62@media screen and (max-width: 768px) {
63  header #header_bg .header_container {
64    display: block;
65  }
66}

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

回答1件

ベストアンサー

私がよく使ってる方法です。
もっと良いやり方あるかもですが。。

html
1<header>
2    <div class="headerInner">
3        <h1><a href="#"><img src="logo.png" alt="logo"></a></h1>
4        <nav class="navGlobal">
5            <ul>    
6                <li class="menuSp"><a href="#">MENU</a></li>
7                <li><a href="#">Top</a></li>
8                <li><a href="#">Menu</a></li>
9                <li><a href="#">About</a></li>
10                <li><a href="#">Conpany</a></li>
11                <li><a href="#">Contact</a></li>
12            </ul>
13        </nav>
14    </div>
15</header>

css
1header {
2    background-image: url("header_bg.png");
3}
4header .headerInner {
5    display: flex;
6    max-width: 1000px;
7    margin: 0 auto;
8    padding: 20px;
9}
10header .headerInner h1 {
11    margin-right: auto;
12}
13header .headerInner h1 img {
14    display: block;
15}
16header nav.navGlobal > ul {
17    display: flex;
18    list-style: none;
19}
20header nav.navGlobal ul > li {
21    margin: 20px;
22}
23@media screen and (min-width: 768px) {
24    header nav.navGlobal .menuSp {
25        display: none;
26    }
27}
28@media screen and (max-width: 768px) {
29    header nav.navGlobal .menuSp {
30        display: block;
31    }
32    header nav.navGlobal li {
33        display: none;
34    }
35
36}