positionのfixedで、bottomだけが効かない原因についてヒントを頂きたいです。

Question

前提・実現したいこと

ナビゲーションバーを、このように配置したいです。

positionを使った理由

最初、高さを100vhに設定し、flexboxで上下に配置したのですが、
そうすると、画面全体をナビゲーションバーが覆ってしまい、スマホverの時に、中のコンテンツが何もclick出来ないという事態になってしまったので、

LOGOとmenuを、それぞれposition:fixedで設定しました。(ソースコード後述)
スマホバージョンにしたときは、menuだけが右下にくるので、

@media (max-width: 667px) {
  .global-navi .menu {
    bottom: 0%;
    right: 0%;
  }
}

にすればいいな、と思い上記のように設定しました。

起こっている問題

なぜか

効きません。
しかも、なぜか、全部試してみたのですが、この、スマホバージョンの、menuだけに効きません。
原因を探しましたが、今日は見つけることが、出来ませんでした。

苦肉の策で、原因は分からないまま、

@media (max-width: 667px) {
  .global-navi .menu {
    top:80%
    right: 0%;
  }
}

はきくので、今はこのようにしましたが、釈然としません。

高さを決めてないから、bottom では動かないのだろうかと思ったのですが、高さを設定してしまうと、中のコンテンツが押せなくなってしまう…と思いました。

<header>
            <nav class="global-navi">
                <div class="logo">
                    <p>LOGO</p>
                </div>
                    <div class="menu">
                        <ul>　　　　　　　　　　　　　　　　　　　　　　　　↓これは、ページ遷移のアニメーションです。
                            <li class="li"><a href="index.html" class="animsition-link">TOP</a></li>
                            <li class="li"><a href="commitment.html" class="animsition-link">COMMITMENT</a></li>
                        </ul>
                    </div>
            </nav>
        </header>

/*---header---*/
/*---グローバルナビ---*/
header {
  position: relative;
  mix-blend-mode: multiply;
  z-index: 2;
}

.global-navi {
  display: none;　
  /*初期状態：非表示*/
}

.global-navi .logo p {
  font-size: 1.40625vw;
  font-family: "playfair-display", serif;
  font-style: normal;
  font-weight: 900;
  line-height: 1em;
  color: #6d0d11;
  padding: 2% 1%;
  position: fixed;
  top: 0%;　←自分の思い通りに、移動させられます
  left: 0%;　←自分の思い通りに、移動させられます
}

@media (max-width: 667px) {
  .global-navi .logo p {
    font-size: 18px;
    margin-top: 5%;
  }
}

.global-navi .menu {
  padding: 2% 3%;
  position: fixed;
  top: 0%;　←自分の思い通りに、移動させられます
  right: 0%;　←自分の思い通りに、移動させられます
}

@media (max-width: 667px) {
  .global-navi .menu {
    top: 80%;　←　←自分の思い通りに、移動させられません
    right: 0%;　←自分の思い通りに、移動させられます
  }
}

.global-navi .menu a {
  font-size: 20px;
  font-family: "din-1451-lt-pro-engschrift", sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #eae2db;
  line-height: 1.75em;
  color: #6d0d11;
  display: block;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

@media (max-width: 667px) {
  .global-navi .menu a {
    font-size: 15px;
  }
}

試したこと

• ページ遷移の、JS側で何か起こっているのだろうか？と思い色々探したところ、

position: fixedが効かない場合の対処法
親要素のtransformを外せばokです。という記事を発見しました。
JSはこちらです。

  $(function(){
    //表示するスクロール量（px）
    var scrollPoint = 600;
    $(window).scroll(function(){
        if($(this).scrollTop() > scrollPoint){
            $('.global-navi').fadeIn();
        }else{
            $('.global-navi').fadeOut();
        }
    });
});

なので、試しに

@media (max-width: 667px) {
  .global-navi .menu ul {
    bottom: 0%;
    right: 0%;
    -webkit-transform: none !important;
            transform: none !important;
  }
}

としてみました。⇒失敗しました。

• topもぜろにする必要があるような記事を発見したので、そうしてみました。

@media (max-width: 667px) {
  .global-navi .menu {
    top: 0%;
    bottom: 0%;
    right: 0%;
  }
}

⇒失敗しました。

• ulまで指定して、詳細度を上げる必要があるのだろうか、と思いました

@media (max-width: 667px) {
  .global-navi .menu ul {
    top: 0%;
    bottom: 0%;
    right: 0%;
  }
}

⇒失敗しました。

---

そのまま、top 80%のままなら、動くっちゃ動くのですが
どうして、こうなったのか、分かりません…おそらく何か、勉強不足のものが、ありそうな…
top 80%にするのが正解なのでしょうか？高さを設定できないパターンだから、という理由で。
だとしたらしょうがないからこれが正解、ということでしょうか？

お忙しいところ、大変恐縮ですが、何かヒントを頂けましたら幸いです。
宜しくお願いいたします。

Answer 1

提示されていないところでtopが指定されているのであれば、
top: auto; では。

【top - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/top#values

Comments

[nomura02]

ご回答、ありがとうございます！
MDNを、まず全部目を通したほうがよいですね…
パソコンバージョンで、topを指定し、
スマホバージョン(@media)でbottomを指定したとしても、
top:autoが効いていて、MDNに書いているとおり、「top プロパティが優先されて bottom プロパティは無視され」るという理解で正しいでしょうか。

[kei344]

＞topを指定し、
＞ top:autoが効いていて、
なんのことでしょう。

「無視される」ではなくtopに数値での指定値があってbottomにもある場合両方適用されるだけだと思います。

[nomura02]

ご返答、ありがとうございます。
すみません、大変恐縮なのですが、もう少しお聞きしてもよろしいでしょうか
パソコンバージョンの時は、
top:0%
right:0%
で、
スマホの時は、
bottom:0%
right:0%
としたかったのに、これが効かないのは、

top:0%
bottom:0%
right:0%
と、こう両方きいてしまっているというかパソコンバージョンで設定したtopが継承されてしまってるから、という意味でしょうか？？
ならば効くのは
top: auto;
bottom: 0%;
right: 0%;
とすればいいんじゃないですかっていう、意味だったでしょうか？？
↑ちなみにこれを今理解して試してみたら上手くいったのですがこの解釈で正しいでしょうか…

[nomura02]

topに0％という数値での指定値があって、スマホバージョンでもbottomに0％という指定値もある場合、両方適用されるだけ
という理解であっていますでしょうか。

[kei344]

理解や解釈はあなたの頭の中の出来事なので、正しいかどうかを聞かれてもわかりません。
CSSは「指定の上書き」ができるので、どのようなときにどのような挙動をするのかを地道に確認しましょう。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

[nomura02]

はい、確認します。
ご丁寧に、ありがとうございました！！