CSSのposition:fixedで左端を親要素基準にしたい場合はleft:autoで解決！

あまり多いケースではないかもしれませんが、CSSでヘッダーなどの位置固定レイアウトでfixedを使う際にブラウザ基準ではなく親要素基準にする方法です。

以下のCSSで親要素の左端にposition:fixedでも合わせることができます。

#header {
	position: fixed;
	background: #fff;
	width: 100%;/*要注意*/
	top: 0;
	left: auto;
}

ただ、この例だとwidthに100%を設定していますが、このままだと左端は確かに親要素基準になるのですが右端はブラウザいっぱいまで広がってしまいます。

現状cssでの対処法は見当たらないのでJavascriptで親要素の横幅を取得して、fixedを指定した要素の横幅に指定してあげることで解決するのが良いと思います。

//jQueryでの例
$('#header').css('width' , $('#parent').outerWidth() );

#parentのところは親要素のidなどを入れて使ってください。