bootstrapのナビについて

実現したいこと

bootstrap5を使ってWEB制作をしています。

グローバルナビゲーションをメインビジュアルの背景画像と重なるように配置したいです。

bootstrapのクラスにあるfixed-topのようなナビゲーションの重ね方で、固定しない(スクロールしてもついてこない)ようにしたいです。

発生している問題・分からないこと

CSSでheaderにposition :relativeをつけて動かしても文字だけが動いてしまいます。
デベロッパーツールで見ても、headerは動いており画像上部の青部分がなんなのか分からない状態になっています。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta content="width=device-width, initial-scale=1.0" name="viewport">
6  <title>???</title>
7  <meta content="" name="descriptison">
8  <meta content="" name="keywords">
9  
10  <!-- CSS Files -->
11  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
12
13  <link rel="stylesheet" href="css/style.css">
14</head>
15
16<body>
17<!-- =======================
18      　　ヘッダー 
19=========================== -->
20  <header>
21	<nav class="navbar navbar-expand-lg navbar-dark">
22  		<div class="container">
23    		<a class="navbar-brand" href="#">icon</a>
24    		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
25      			<span class="navbar-toggler-icon"></span>
26    		</button>
27    	<div class="collapse navbar-collapse" id="navbarNavDropdown">
28      		<ul class="navbar-nav ms-auto">
29        		<li class="nav-item">
30          			<a class="nav-link active" aria-current="page" href="#pride">aaa</a>
31        		</li>
32        		<li class="nav-item">
33          			<a class="nav-link" href="#">aaaa</a>
34        		</li>
35        		<li class="nav-item">
36          			<a class="nav-link" href="#">aaaaa</a>
37        		</li>
38		 		<li class="nav-item">
39          			<a class="nav-link" href="#">aaaaaa</a>
40        		</li>
41		  		<li class="nav-item">
42          			<a class="nav-link" href="#">aaaaaaa</a>
43        		</li>
44		  		<li class="nav-item">
45          			<a class="nav-link" href="#">aaaaaaaa</a>
46       		 	</li>
47			</ul>
48		</div>
49	</div><!-- container -->
50</nav><!-- navbar -->
51  </header>
52
53<main>
54<!-- =======================
55      	　top
56=========================== -->
57<div class="container-fluid min-vh-100 top">
58</div>
59</main>
60</html>

css
1@charset "utf-8";
2/* CSS Document */
3
4html{
5  font-size: 62.5%;
6}
7
8/*フォントタイプ決め*/
9
10body {
11  background: #ffff00;
12  color: #343434;
13  font-family: "BIZ UD明朝 Medium", "BIZ UDP明朝 Medium", "游ゴシック", "メイリオ";
14}
15
16a {
17  color: #343434;
18}
19
20/* =====================================
21  フォント
22===================================== */
23
24.t-font32{
25  font-size: 3.2rem;
26}
27.t-font18{
28  font-size: 1.6rem;
29}
30.t-font32{
31  font-size: 3.2rem;
32}
33
34
35/* -------------------------
36  headerナビ
37------------------------- */
38header{
39  position: relative;
40  top: 10rem;
41  z-index: 100;
42}
43
44.navbar {
45	background-color: rgba(0,0,0,0);
46}
47
48.navbar-brand{
49  font-size: 1.6rem;
50  font-weight: bold;
51}
52
53.navbar-dark .navbar-nav .nav-link,
54.navbar-dark .navbar-nav .nav-link a,
55.navbar-dark .navbar-nav .nav-link:hover{
56  color: #fff;
57  font-size: 1.05rem;
58  font-weight: 600;
59}
60
61
62/* top
63------------------------- */
64.top{
65  background-image: url(../image/haikei.jpg);
66  background-size: cover;
67  background-position: bottom;
68  z-index: 0;
69}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

補足

特になし

Lhankor_Mhy

2025/02/04 03:58

補足願います。 1. その2つ目のスクリーンショットの青色部分は、ご提示のコードでも青色で表示されますか？それとも、keelさんがわかりやすいように塗ったものですか？ 2. 『文字だけが動いてしまいます』とありますが、文字以外の何が一緒に動いてほしい感じですか？　header ですか？

Lhankor_Mhy

2025/02/04 04:01

すみません、追加で。 3. グラデーションのボックスは、ご提示のHTMLコードで言うとどの要素になりますか？

keel

2025/02/04 05:33

情報不足ですみません。何が足りないでしょうか？

Lhankor_Mhy

2025/02/04 05:37

追加いただきたい情報について、1，2，3に列挙したつもりでしたが、なにかわからないところがありますか？

keel

2025/02/04 06:28

すみません、ちゃんと読んでいませんでした… 1. 青い部分は背景色です。画像にはありませんが、CSSで背景色を指定しています。 2. 文字だけでいいのですが、謎の空白が上部に残ってしまうので、それを消したいです。 3. グラデーションは背景画像になります。コードは画像にはありません。

Lhankor_Mhy

2025/02/04 06:38

ありがとうございます。 > 画像にはありませんが、CSSで背景色を指定していますこれは、ご提示いただいているCSSコードでいうと、どの部分ですか？

juner

2025/02/04 07:03

@keel その内容だとこんな playground になるので確認しづらいですね https://livecodes.io/?x=id/dfbiet7e3kf @Lhankor_Mhy 入れてみた感じだと :root あたりに背景色入れたらそれっぽくなりますね。（なので追加のコードが必要なのはそう

Lhankor_Mhy

2025/02/04 09:27

おそらく、ご提示のコードだけでは問題が起きないだろうと思います。これに加え、謎の空白である青背景の要素とグラデーション画像の要素およびそれらのCSSが問題に関係しているような気がします。もう少しコードの範囲を広げてご提示いただけると、回答が付きやすいかもしれません。

keel

2025/02/05 03:14

すみません、返答が遅れました。昨日お見せしましたソースコードをさらに範囲を広げました。ほかにも何かあればよろしくお願いします。

Lhankor_Mhy

2025/02/05 04:21

ありがとうございます。問題を把握しました。 utm. さんのご回答の通りだと思います。headerにつけるといいかと思います。

keel

2025/02/05 08:10

解決しました。ありがとうございます。