Q&A
htmlも提示してください
前提・実現したいこと
fixedを使ってheaderを上に固定したい。
発生している問題・エラーメッセージ
親要素にfixedを指定すると、小要素が左づめになる
下記のようにすると、横幅１１７０pxの小要素が左上詰になってheaderの右端に空白ができます。
header-containerにfixedを指定するとこのようになるのはわかるのですが。。。
該当のソースコード
css
header {
background-color: black;
position: fixed;
}
/headerの小要素/
header-container {
width: 1170px;
margin: 0 auto;
}
試したこと
headerにwidth: 100%;を指定したら問題ないのですが、解決策が気になるのではなく、そうしないといけない理由が知りたいです。
補足情報（FW/ツールのバージョンなど）
Progateでの話です。
些末なことで申し訳ないですが、
header-container{
ではなくて、
.header-container{
などではないでしょうか。
okinaさん
コメントありがとうございます。質問が分かり辛くてすみません。今回は解決してしまったのですが、今後質問をするときは、そのようにします。
Lhankor_Mhyさん
おっしゃる通りです。すみません。
細かいことを言ってすみませんでした。
ご解決されたのであれば、BAの選出か、自己解決の手続きをお願いします。
https://teratail.com/help#resolve-question
https://teratail.com/help#resolve-myself
回答2件
0
headerにwidth: 100%;を指定したら問題ないのですが、解決策が気になるのではなく、そうしないといけない理由が知りたい
必ずしもそうしないといけないわけではありません。たとえば：
サンプル
position: fixedかつwidth: autoの要素がどのように幅が決まるのか、については、仕様があります。以下の表をご参照ください。
CSS Positioned Layout Module Level 3
ご提示のコードは、left right widthがautoなので、表の1行目に当たります。
auto margins → zero
left → static pos
width → shrink-to-fit
right → solve
と書いてありますから、leftは静的配置と同様に左寄せ、widthはコンテンツ幅に縮小、rightは最後に包含ブロックに合わせて計算されます。
私が書いたサンプルは、left right を指定したため、widthはsolve for autoとなり、包含ブロックに合わせて広がりました。
なお、position: fixedの場合、包含ブロックはスクリーンになると思って、概ね問題ありません。
詳細については、以下をご参照ください。
レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN
固定位置指定 | position - CSS: カスケーディングスタイルシート | MDN
投稿2020/05/13 03:01
編集2020/05/13 03:23総合スコア36960
0
ベストアンサー
MDN の position の fixed の解説に下記のように記載されています。
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。
CSS: カスケーディングスタイルシート> position > fixed
header はブロックレベル要素なので通常は親要素の幅まで広がりますが、fixed を設定すると「要素のための空間が作成されない」ために明示的にサイズを指定しないと内包物のサイズになります。（提示のCSSだと幅1170px）
投稿2020/05/13 01:29
編集2020/05/13 11:16
総合スコア34075
横からすみません。
>位置は指定がなければウィンドウの左上になります
些末なことですが、これは正確ではないと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/top#Values
https://developer.mozilla.org/ja/docs/Web/CSS/left#Values
お忙しいところすみませんが、ご返答かご修正をいただくまで、暫定的に低評価をします。
あしからずご容赦ください。
あなたの回答
tips
プレビュー
