position:fixedを指定した要素を、画面幅いっぱいに広げる方法を紹介しています。
結論
position: fixedを指定した要素のleftおよびrightプロパティに0を指定する
実際に書いたコード
https://codepen.io/itsumoonazicode/pen/OJgwazw
どうしてleftとrightに0を指定するだけなのか
MDNの記事に、positionプロパティの各値がどのような挙動を取るのかに関する記事があります。その中の『絶対位置指定要素とは』から始まる文章に答えがあります。
以下引用。
top, right, bottom, left の各プロパティは、この要素の包含ブロックの端からのオフセットを指定します。
オフセットとは、「基準となる位置からのズレを表す値」とのことなので、
left, rightに0を指定するということは、オフセットが0である=ズレ無し ということになります。
ITの分野では、何かの位置を指し示す際に、基準となる位置からの差（距離、ズレ、相対位置）を表す値のことをオフセットということが多い。
オフセット（offset）とは - IT用語辞典 e-Words
position: fixed指定時の基準となる位置に関しても、MDNの記事で言及されています。先ほどのMDNの記事内から引用します。
ビューポートによって定められた初期の包含ブロックに対して相対配置されます
通常、widthなどを%で相対指定する際は親要素の横幅が基準となります。position: fixedが指定された要素に関しては、それがビューポートになるということです。これにより、その親要素の横幅に関係無く画面幅いっぱいに横幅を伸ばすことができます。
記事の本文はここで終わりです。
この記事を書いた経緯
ここからはおまけです。
子要素を親要素からはみ出して画面幅いっぱいにしようとしていた
もともとは、固定幅が指定された親要素の横幅を無視して、子要素を画面幅いっぱいに広げるという方法を採ろうとしていました。
参考にしたのは、はにわまんさんのこちらの記事です。
結果だけ言うと、この方法だとうまくいきません。position: fixedを指定した要素は基準がビューポートになるため、50%も50vwも変わらないからです。これに気づかず、試行錯誤していました。
CSS-Tricksのpositionの各値に関する比較記事を眺めていたときに、横幅の指定が無いことに気づいてようやく先述のMDNの記事にたどり着きました。leftやtopの値は、てっきりX軸Y軸の座標を表すものに相当するのかと思っていましたが、オフセットなんだと知ってようやく合点がいきました。
よく使うプロパティではありますが、間違った覚え方をしていたので今回認識を改めることができてよかったです。
