Q&A
下記のcssにおいて、headerにposition:fixedを設定すると、その子要素であるcontainerのmargin:0 autoが効かなくなってしまいます。
このように、position:fixedを設定すると、子要素のmarginが効かなくなってしまうのでしょうか？
また、それはなぜでしょうか？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> <title>Document</title> </head> <body> <header> <div class="container"> <div class="header-left">logo</div> <div class="header-right">list</div> </div> </header> <section> contents </section> <footer> footer </footer> </body> </html>
.container{ width: 1170px; margin: 0 auto; background-color: pink; } header{ background-color: rgba(34, 49, 52, 0.9); height: 65px; /* fixedを設定すると、子要素であるcontainerのmargin:0 auto が効かなくなる */ /* position:fixed; */ } .header-left{ float:left; background-color: blue; } .header-right{ float:right; background-color: green; }
回答1件
0
ベストアンサー
position: fixed;の場合、fixedをかける要素（header）に幅を指定しないと中身の要素の幅（containerの幅=1170px）になってしまいます。
試しにheaderにwidth:100%;を指定してみてください。おそらく改善されます。
投稿2019/08/15 02:33
総合スコア10429
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/15 02:48
2019/08/15 02:53 編集
2019/08/16 19:36 編集
2023/12/08 05:19