position: fixed;で、他のセクションとずれない方法

position: fixed; html&css

position: fixed;は、スクロールしてもその部分を固定して動かさないことができます。
しかし、他のセクションと幅がずれます
それが下の動画のように、ぴったりと合って可変するコードを紹介します。

しょーご中級の課題は、スクロールしてもヘッダーを動かさないようにすること。
最初に作り始めた時は、画面幅が1366pxで作ります。

その時は下のように合うのですが・・・。


いざレスポンシブに対応しようとすると、
ヘッダーが、下にある全てのセクションとずれることに気づきます。

↓画面幅を小さくした時
(ヘッダーが右にずれています。)

↓大きくした時(ヘッダーが左にずれています。)

コードは下記。

ググりまくって、どうやらwidthは100%ではなく、
100vwにするといいらしいことにたどりつきます。

すると・・・

↓画面を小さくした時(ぴったり合っています。)

ヘッダーと下のセクションがぴったり合って縮小されるようになりました!!

しかし、、、
画面幅を大きくすると、、、

また、ずれてしまいます。(ヘッダーが左にずれています。)

また、ググります。。。

すると、
お待たせしました。
下記のコードで、
最初にあった動画のように、画面を小さくしても大きくしても合うようになります。

まとめ

width: 100vw;
left: 50vw;
transform: translateX(-50%);

にすると、ずれることなく、中央に表示されます。

(備忘録的に書いていますので、説明不足はご了承ください。)

コメント

タイトルとURLをコピーしました