【CSS】左のボックスを固定する方法が知りたい

##したいこと

チャット画面を実装中です。
下記画像のように左のボックス（リクエスタ、件名などを表示する部分）を実装したい。

###理想の状態
画面のサイズが変わっても、ずれないように固定する。

###つまづいている部分
固定されていない。
画面のサイズが変わると左にずれてしまう。

###現状のコード

vue
1<template>
2  <v-app>
3      <v-container fluid>
4    <div class="sidebar">
5           ああ
6    </div>
7      
8      </v-container>
9    
10  </v-app>
11</template>
12
13<style>
14
15.sidebar {
16  background:royalblue;
17  width:250px;
18  height:10000px;
19  margin-top:-24px;
20  margin-left:-153px;
21  position: fixed;
22}
23</style>

アドバイスをいただければと思います。

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

回答1件

ベストアンサー

position: fixed; が効いていれば固定されるはずです。
ネガティブマージンを設定しているのでその分画面外に移動しているだけでは。
fixed で固定した場合は top left で位置決めするのが通常です。

下記のような感じのCSSにすればどうでしょうか。

css
1.sidebar {
2  background:royalblue;
3  width:250px;
4  height:100vh;
5  overflow: auto;
6  top: 100px; /* ヘッダーと被らないようヘッダーの高さ分下にずらす */
7  left: 0;
8  position: fixed;
9}