fixdeで指定しているのに他の文字も前面に出て困っています

ハンバーガーメニューをクリックしても前面にはでるものの、

↑こうなってしまします

↑にのようにしたいです。
レイアウトは後から調整します、今回はなぜ他の文字がz-index等を指定していないのに前面にくるのか教えていただきたいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" href="./reset/reset.css">
9    <link rel="stylesheet" href="./css/style.css">
10</head>
11<body>
12    <header id="header">
13        <div class="top_heading">
14        <h1>
15            <a href="#">
16            <img src="./imgs/site-logo.png" alt="ロゴ">
17            </a>
18        </h1>
19    </div><!--end .top_heading -->
20        <!-- ハンバーガーメニュー -->
21        <div class="hamburger">
22            <span></span>
23            <span></span>
24            <span></span>
25          </div>
26          <nav class="globalMenuSp">
27
28            <ul>
29              <li><a href="#">ABOUT US</a></li>
30              <li><a href="#">WORKS</a></li>
31              <li><a href="#">CULTURE</a></li>
32              <li><a href="#">TOPICS</a></li>
33              <li><a href="#">CONTSCT</a></li>
34            </ul>
35          </nav>
36          <div class="black_bg"></div><!--end .black_bg -->
37        </header><!--end #header -->
38
39        <section class="mv">
40        <div class="img_block">
41            <div class="mv_heading">
42                <p class="mv_sub_heading">デザインで人を笑顔にする会社
43                    <br>DIGSMILE INC.</p><!--end .mv_sub_heading -->
44                <h2>DESIGN <br>FOR<br>SMILE.</h2>
45        </div><!--end .mv_heading -->
46        </div><!--end .img_block -->     
47        </section><!--end .mv -->
48
49        <section class="about">
50            <div class="container">
51                <div class="about_img_block">
52                <div class="des_block">
53                    <h3>ABOUT US</h3>
54                    <p class="des">DIGSMILEは、デザインで人を笑顔にする会社。
55                        なんでもない日常に少しのワクワクと遊び心を提供します。笑顔には世界を変える力がある、デザインには人を幸せにする力がある。毎日に幸せを感じて生きていきたい。
56                        DIGSMILEの社名にはそんな想いが込められています。</p>
57                        <a href="#">READ MORE</a>
58                </div><!--end .des_block -->
59            </div><!--end .about_img_block -->
60            </div><!--end .container -->
61        </section><!--end .about -->
62
63        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
64        <script src="./js/main.js"></script>
65</body>
66</html>

$accent_c:#F0F0F0;

body{
    line-height: 1.5;
}
a{
    text-decoration: none;
}
.container{
    margin: 0 auto;
    max-width: 1100px;
}
#header{
    position: fixed;
    .top_heading{
        margin-top: 1.9em;
    }


/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index :100;
  right : 13px;
  top   : 12px;
  width : 90px;
  height: 42px;
  cursor: pointer;
  text-align: center;
  -webkit-transition: 0.5s all;
  -moz-transition   : 0.5s all;
  transition        : 0.5s all;
  &::after{
      content: "MENU";
      display: inline-block;
      color: #fff;
      position: absolute;
    margin-top: .7em;
  }
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #F0F0F0;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active{
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2) {
  top: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
.hamburger.active span:nth-child(3) {
  opacity: 0;
}

nav.globalMenuSp {
  position: fixed;
  z-index : 99;
  top  : 0;
  right : 0;
  color: #000;
  background: #222222;
  text-align: center;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 40%;
  height: 100vh;
  padding-top: 9em;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
//   padding: 0;
  width: 100%;
  padding-top: 2em;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
//   padding: 1em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}

.black_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.5);;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
  }
}
//   

.mv{
    height: 100vh;
    color: #F0F0F0;
    .img_block{
        background-image: url(../imgs/kv-img.png);
        background-size: cover;
        background-position: top;
        height: 80%;
        width: 80%;
        &::after{
            z-index: -1;
            content: "";
            display: block;
            width: 50%;
            background: black;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
        }
    }
    .mv_sub_heading{
        font-size: 1.2rem;
        position: absolute;
        top: 23%;
        left: 61.5%;
        font-weight: bold;
    }
    h2{
        position: absolute;
        top: 30%;
        font-size: 4.5rem;
        left: 61%;
    }
}

// about
.about{
    .about_img_block{
    background-image: url(../imgs/about-img.png);
    background-repeat: no-repeat;
    height: 100vh;
}
.des_block{
    background-color:rgba(255,255,255,.9);
    width: 590px;
    height: 387px;
    
}
}

itagagaki

2021/05/15 07:08

もしかして ./js/main.js が無いとハンバーガーメニュー開けないんですかね

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

回答1件

ベストアンサー

以下のようにするとどうでしょうか。

css
1#header {
2	position: fixed;
3	z-index: 1; /* 追加 */
4}

参考：
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA

__今回はなぜ他の文字がz-index等を指定していないのに前面にくるのか教えていただきたいです。 __

すみません、解決方法は不要だったのですね。

参考リンクをお読みになればわかるかと思いますが、.globalMenuSpの祖先である#headerがスタッキングコンテキストを生成し、なおかつz-index: autoであったため、同レベルのスタッキングコンテキストである.mv_sub_headingにDOM出現順で負けてしまうことが原因です。

投稿2021/05/15 07:47

編集2021/05/15 08:02