position:absolute;について

Question

ハンバーガーメニューを右側から表示するために、リストをright:-400px;で指定し、画面の外側に隠したいと思っています。

しかしposition: absolute;で右側に配置するとスクロールできるようになってしまい画像のように隠れてくれません。

left: -400px;　では画面はスクロールできずに隠れてくれるのですがなぜでしょうか？

 <header>
    <div class="container">
      <img src="images/header_logo.png" alt="ロゴ">
      <nav class="header-nav">
        <input id="menu" type="checkbox">
        <label for="menu" class="open">≡</label>
        <label for="menu" class="back"></label>
        <label for="menu" class="close">×</label>
      
       <ul>
         <li><a href="">企業理念</a></li>
         <li><a href="">施工事例</a></li>
         <li><a href="">採用情報</a></li>
         <li><a href="">お問い合わせ</a></li>
       </ul>
    </nav>
  </div>
  <h1>街を作る。未来を作る。</h1>
  </header>

header ul {
  position: absolute;
  right: -400px;
  width: 30%;
  text-align: center;
  font-size: 28px;
  background: red;
}

#menu:checked ~ ul {
  position: fixed;
  right: 0;
  background: white;
  transition: 0.2s;
}

Answer 1

position: absolute;をposition: fixed; にすればどうでしょうか。

header ul {
  position: fixed;
  right: -400px;
  width: 30%;
  text-align: center;
  font-size: 28px;
  background: red;
}

#menu:checked ~ ul {
  right: 0;
  background: white;
  transition: 0.2s;
}

Comments

[shu0106]

position: fixed; にすると解決しました。
ありがとうございます。

これはなぜこうなるのでしょうか？

わかればposition: absolute; left:-200px の場合はこの問題が発生しないことと併せて解答いただけるとありがたいです。

[hatena19]

https://developer.mozilla.org/ja/docs/Web/CSS/position の解説を読んでもちょっと正確な理由は分かりません。
詳しい人の解説を私もききたいです。

[Lhankor_Mhy]

横からすみません。

これは包含ブロックの違いによるものだと思います。

position: absolute の包含ブロックは、（配置された祖先要素がない場合）「初期包含ブロック」と呼ばれるものになります。
一方で、position: fixed の包含ブロックは、「ビューポート」です。
https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block

このビューポートとは、MDNに「基本的に文書のうち、現在見えている部分」とあるとおり、いわゆる「表示域」のことです。
https://developer.mozilla.org/ja/docs/Web/CSS/Viewport_concepts

初期包含ブロックとは、MDNに「これはビューポート (連続的なメディアの場合) またはページ領域 (ページメディアの場合) の寸法を持ちます。」とあるとおり、ビューポートと同じサイズを持ちます。
そして、MDNの記述からは省かれているのですが、"anchored at the canvas origin"（__キャンバスの原点に固定される__）と定義されています。
https://www.w3.org/TR/CSS2/visudet.html#containing-block-details

このキャンバスとは、仕様書を見るといわゆる「描画域」のことです。スクロールするメディアの場合、無限の大きさを持つ描画域をビューポートで覗いているようなイメージになります。
https://www.w3.org/TR/CSS2/intro.html#canvas

つまり、初期包含ブロックは描画域の(0,0)に固定されるので、スクロールさせた場合ビューポートに追従せずスクロールに追従します。

つまり、position: absolute かつ right: -400px は、左上の原点から画面サイズ+400pxの場所に配置されますが、スクロールに追従するので、スクロールしてみることができます。
一方で、position: fixed かつ right: -400px は、ビューポートの原点から画面サイズ+400pxの場所に配置されます。ビューポートの外側なので表示させることはできません。

---

この記事も参考になると思います。
https://saneyukis.hatenablog.com/entry/2015/01/09/045554

---

なお、left:-200px の左側が特別扱いされてる件については、この質問の回答がわかりやすいと思います。
https://teratail.com/questions/238386

[shu0106]

本当によく理解できました。

ご教示いただきありがとうございます。