position fixedでleft:0; は正常に表示されるが、right:0;にすると正常に表示されない

Question

プログラミング初心者です。

ハンバーガーメニューをクリック時に右上部に表示リストを表示させようとしています。

cssの#menu:checked ~ ul の記述にて
position: fixed;
left: 0;
とすると正常に左上部に表示されるのですが

position: fixed;
right: 0;
とすると　ulリストの文字が消え、要素が横幅いっぱいに広がって表示されます。

原因がわからないので、お手数ですがご教授願います。

<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>

h1 {
  font-size: 24px;
  text-align: center;
}

header {
  background-image: url(../images/main.png);
  background-size: cover;
  height: 300px;
}

header .container {
  display: flex;
  justify-content: space-between;
}

header img {
  width: 100px;
  height: 46px;
  margin-top: 10px;
  margin-left: 20px;
}

header h1 {
  font-size: 24px;
  text-align: center;
  margin-top: 100px;
}

.open {
  margin-top: 26px;
  margin-right: 20px;
  display: block;
}

.open , .close {
  font-size: 40px;
}

#menu {
  position: absolute;
  left: -50vw; 
}

.close , ul {
  position: absolute;
  left: -50vw;
  /* visibility: hidden; */
}

#menu:checked ~ ul {
  position: fixed;
  right: 0;
  /* margin-left: auto; */
  background: red;
}

Answer 1

原因は下記でul要素に left: -50vw を設定してるからです。

.close , ul {
  position: absolute;
  left: -50vw;
  /* visibility: hidden; */
}、

#menu:checked ~ ul で left: 0; と上記の設定を打ち消せば表示されますが、
#menu:checked ~ ul で right: 0; としただけではleft: -50vw;は活きていますので、
左は画面の左端の-50vwの位置から、右は画面右端まで引き延ばされます。

.close , ul {以降を下記のように修正してください。

/* ↓ここの.ul は削除 */
.close {
  position: absolute;
  left: -50vw;
/*  visibility: hidden;*/
}
/* 以下追加 */
.header-nav ul {
  position: fixed;
  visibility: hidden;
}

/* ここまで */
/* 下記は修正 */
#menu:checked ~ ul {
  right: 0;
  visibility: visible;
  
  /* margin-left: auto; */
  background: red;
}

Comments

[shu0106]

ご回答ありがとうございます。

上記修正に解決いたしました。

後学のために教えていただきたいのですが、
この場合 position に対してleft と right が混在することになり、バグが発生して添付写真のように表示されるのでしょうか？

「左は画面の左端の-50vwの位置から、右は画面右端まで引き延ばされます。」
というのはなぜこのような表示になるのでしょうか。

[maisumakun]

「> この場合 position に対してleft と right が混在することになり、バグが発生して添付写真のように表示されるのでしょうか？

バグではありません。書いたとおりに「left: -50vw」と「right: 0」が両方適用されて、左端が画面の左側より左、右端は画面の右端になっているだけです。