HTML/CSS 画像の上にナビゲーションを重ねて表示したい。

Question

画像の上にナビゲーションメニューを重ねて表示したく、
画像に```
#main {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 10;
}

ナビゲーションメニューに```
.header-nav {
  position: absolute;
  top: 60%;
  left: 30%;
  z-index: 11;
} 

を設定したのですが、画面のサイズが変わるとずれてしまい、レスポンシブデザインではなくなってしまいます。
どのようにしたら画像の特定の位置に固定できてどの画面サイズで見ても同じ位置に配置されるのでしょうか？

画面サイズが変わると・・・↓

Comments

[Lhankor_Mhy]

HTMLをご提示ください。

[pujamaru611815]

<main>
<div class="main">
<img src="img/main.png" alt="メイン画像" id="main">
<nav class="header-nav">
<ul>
<li><a href="#works">WORKS</a></li>
<li><a href="#skil">SKILL</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>

</div>

コメントありがとうございます。
これが、該当部分のHTMLです。
よろしくお願いいたします。

[pujamaru611815]

/* main */
.main {
max-width: 100%;
margin: 0 auto;

}
#main {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 10;
}
.header-nav ul {
display: flex;
justify-content: center;
margin-right: 120px;

}
.header-nav {
position: absolute;
top: 60%;
left: 30%;
z-index: 11;
}
.header-nav li {
font-size: 20px;
color: #547D55;
margin: 0 20px;
}
.header-nav li:hover {
opacity: 0.5;
}

参考までに、こちらはCSSです。

Answer 1

現状は、ナビゲーションメニューの水平配置を左から40%の位置に絶対配置しているので、画面幅を小さくすると右寄りになり最終的にははみ出します。これを改善したいということですよね。
垂直方向は現状の上から60％の位置でいいですよね。
(推測が違ったらご指摘ください。)

左から40%の位置に絶対配置するのではなく画像の中央配置になるようにすれば改善されるでしょう。

方法はいろいろありますが、現状のコードを活かすなら、
.header-nav ulにflexで中央配置を設定しているのでそれを活かすために、
親要素(.header-nav)の幅を100%にすればメニュー要素は中央配置になります。

/* main */
.main {
  max-width: 100%;
  margin: 0 auto;
  position: relative; /* 追加 */
}
#main {
  width: 100%;
  margin: 0 auto;
  z-index: 10;
}
.header-nav ul {
  display: flex;
  justify-content: center;
  margin: 0; /* ul要素のデフォルトマージンをリセット */
}
.header-nav {
  position: absolute;
  top: 60%;
  width: 100%; /* 追加 */
  z-index: 11;
}
.header-nav li {
  font-size: 20px;
  color: #547d55;
  margin: 0 20px;
}

CodePenサンプル

Comments

[pujamaru611815]

回答ありがとうございます。
近しいものにはなりました！
画面サイズが変わるのと同時にナビゲーションメニューもサイズが小さくなって画像上の定位置に常に配置される・・・という風な設定は、できないのでしょうか？

画面サイズと画像は小さくなっていくのにナビゲーションメニューのサイズは変わらず・・・というのが気になってしまいます・・・。

[hatena19]

ナビゲーションメニューはテキストですのでフォントサイズをvw(画面幅を基準にした単位)を使って設定すれば画面幅に応じてサイズを小さくできます。
ただ、テキストには読みやすいサイズというのがあるのであまり推奨はしません。

【初心者向け】CSSのvwとvhを理解しよう | 新潟のホームページ制作｜Web制作会社 グローワークス
https://groworks.jp/blog/4620

Answer 2

とりあえず、これを追加するとどうですか。

        .main {
            max-width: 100%;
            margin: 0 auto;
            position: relative; /* これ */
        }

フォントサイズとかもあると思いますので、これだけでは完全に同じとはいかないと思いますが、多少はマシになるのでは。

Comments

[pujamaru611815]

回答ありがとうございます。試してみましたが
画面サイズが変わるとやはりナビゲーションメニューがずれてしまい、解決できませんでした。
何が問題なのでしょうか・・・

[Lhankor_Mhy]

「ずれる」という現象を明確にした方がいいかもしれません。

当方の回答のサンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/ncyf2p49/

ご質問のスクリーンショットのようにトップバナーの下に表示されるようなことはなくなったと思いますが、後はどの部分を解決したい感じですか？

[pujamaru611815]

ご丁寧にサンプルまで添付していただきありがとうございます。

画面サイズが変わるのと同時にナビゲーションメニューもサイズが小さくなって画像上の定位置に常に配置される・・・という風な設定は、できないのでしょうか？

画面サイズと画像は小さくなっていくのにナビゲーションメニューのサイズは変わらず・・・というのが気になってしまいます・・・。

[Lhankor_Mhy]

hatena19さんのコメントのとおりです。