ハンバーガーメニューがコンテンツの下に隠れてしまう

こんにちは。

htmlとcssを使ってハンバーガーメニューを作りたいです。
このページ(CodePen Home
PURE CSS SIDEBAR TOGGLE MENU)を参考にしているのですが、メインコンテンツを表示する場所にカードを作って表示すると、スライドインするメニューがカードの下に隠れてしまいます。

html
1<!doctype html>
2<html lang="en">
3
4<head>
5    <!-- Required meta tags -->
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
9    <!-- Bootstrap CSS -->
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
11        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
12
13    <!-- CSS -->
14    <link rel="stylesheet" href="basic_layout.css">
15
16    <title>Hello, world!</title>
17</head>
18
19<body>
20
21    <div class="header"></div>
22    <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
23    <label for="openSidebarMenu" class="sidebarIconToggle">
24        <div class="spinner diagonal part-1"></div>
25        <div class="spinner horizontal"></div>
26        <div class="spinner diagonal part-2"></div>
27    </label>
28    <div id="sidebarMenu">
29        <ul class="sidebarMenuInner">
30            <li>Jelena Jovanovic <span>Web Developer</span></li>
31            <li><a href="https://vanila.io" target="_blank">Company</a></li>
32            <li><a href="https://instagram.com/plavookac" target="_blank">Instagram</a></li>
33            <li><a href="https://twitter.com/plavookac" target="_blank">Twitter</a></li>
34            <li><a href="https://www.youtube.com/channel/UCDfZM0IK6RBgud8HYGFXAJg" target="_blank">YouTube</a></li>
35            <li><a href="https://www.linkedin.com/in/plavookac/" target="_blank">Linkedin</a></li>
36        </ul>
37    </div>
38    <div id='center' class="main center">
39        <div class="mainInner">
40            <div>PURE CSS SIDEBAR TOGGLE MENU</div>
41        </div>
42        <div class="mainInner">
43            <div>PURE CSS SIDEBAR TOGGLE MENU</div>
44        </div>
45        <div class="mainInner">
46
47// ここからカード
48            <section class="card">
49                <img class="card-img" src="http://webcreatorbox.com/sample/images/bear.jpg" alt="">
50                <div class="card-content">
51                    <h1 class="card-title">Webクリエイターボックス</h1>
52                    <p class="card-text">WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。</p>
53                </div>
54                <div class="card-link">
55                    <a href="http://webcreatorbox.com/about">About</a>
56                    <a href="http://webcreatorbox.com/">Website</a>
57                </div>
58            </section>
59        </div>
60    </div>
61
62</body>
63
64</html>

z-index: 0;をカードが含まれるmainクラスに付与することも試したのですが変わらなかったです。

原因がわかる方いらっしゃいましたら、ご教授いただきたいです。よろしくお願いいたします。

Yasumichi

2020/08/26 13:35

HTML をすべて開示できますでしょうか？bootstrap を使っていますか？

toyop

2020/08/26 13:47

Yasumichiさんコメントありがとうございます。もともとはbootstrapを使っていたのですが、原因がbootstrapかと思い、ネットで公開されていたcssのみで書かれているカードを使って試したところ、同じ状況が起きたという感じです。

Yasumichi

2020/08/26 13:50 編集

basic_layout.css も提示した方が回答がつきやすいと思います。

toyop

2020/08/26 13:53

Yasumichiさんアドバイスありがとうございます。質問内のcssとこちらのページ(https://www.webcreatorbox.com/tech/card)に載っているcssのみ使っており、独自には手を加えていません。

toyop

2020/08/26 13:55

もしかしてと思ってbootstrapを読み込んでいる部分をコメントアウトしてみたところ、この現象が起きなくなったのですが、これhbootstrapを使っていることが問題なのでしょうか。

Yasumichi

2020/08/26 14:00

元の記事が、bootstrap を前提とはしていないので影響はあると思います。ちなみに bootstrap にもカードのデザイン方法はあります。 https://getbootstrap.jp/docs/4.5/components/card/

toyop

2020/08/26 14:11

そうすると、bootstrapを用いつつ、このハンバーガーメニューを使うというのは難しいのでしょうか。

Yasumichi

2020/08/26 14:15

bootstrap に合わせた書き方が必要かと思います。以下のページ等、「bootstrap ハンバーガーメニュー」で検索して、試してみると良いと思います。 Bootstrap4でよく使う基本のナビゲーションバーの書き方 | おべんきょうにっき https://hisa-himi.site/coding/bootstrap/bootstrap-nav/

Yasumichi

2020/08/26 14:19 編集

あと、javascript が読み込まれていないようですが、その部分は省略されているだけでしょうか？ https://getbootstrap.jp/docs/4.5/getting-started/introduction/ また、質問とは関係ないですが、 <html lang="en"> となっていますが、日本語を使うのであれば、 <html lang="ja"> とするのが正しい作法かと思います。

toyop

2020/08/26 15:05

なるほど...。そのキーワードで調べてみたいと思います。とりあえず動作だけ確認したかったので、<html lang="en">のままになっていました。 javascriptは記述し忘れていました。ご指摘ありがとうございます。