問題
メッセージを入力すると、入力したメッセージが、ヘッダーの後ろに隠れてしまっていた。
メッセージが隠れている。
position: fixedの場合
/* position: fixed
要素はビューポート（画面の表示領域）を基準に配置される
headerはbodyのレイアウトに影響を与えず、bodyの高さには含まれなくなる */
header {
// 他省略
position: fixed;
}
原因
position: fixed;を使用しているため、ヘッダーが通常のレイアウトフローから外れ、bodyの高さに含まれなくなっている。
その結果、chat-containerのmargin-topが正しく適用されず、メッセージがヘッダーの後ろに隠れてしまう。
解決方法
position: sticky;を使う
/* position: sticky;
要素がスクロールに応じて動き、特定の位置で固定される
親要素の範囲内でのみ固定される
*/
header {
// 他省略
position: sticky;
}
メッセージを表示できた。
終わりに
devツールを使いながら細かい部分まで見ることになり、勉強になりました！