質問: したいこと ----- チャット画面を実装中です。 下記画像のように左のボックス(リクエスタ、件名などを表示する部分)を実装したい。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d77f7a196360c51453af6314d9a381ef.png) ### 理想の状態 画面のサイズが変わっても、ずれないように固定する。 ### つまづいている部分 固定されていない。 画面のサイズが変わると左にずれてしまう。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/5473e75612d7a12e79936cc816430d3f.png) ### 現状のコード ``` ``` アドバイスをいただければと思います。
回答: `position: fixed;` が効いていれば固定されるはずです。 ネガティブマージンを設定しているのでその分画面外に移動しているだけでは。 fixed で固定した場合は top left で位置決めするのが通常です。 下記のような感じのCSSにすればどうでしょうか。 ``` .sidebar { background:royalblue; width:250px; height:100vh; overflow: auto; top: 100px; /* ヘッダーと被らないようヘッダーの高さ分下にずらす */ left: 0; position: fixed; } ```