質問するログイン新規登録

Q&A

解決済

1回答

8603閲覧

position:fixedを使用した際に子要素のmargin:0 autoが効かなくなる?

Silky

総合スコア34

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2019/08/15 00:34

編集NaN/aN/aN aN:aN

0

2

下記の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; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

guest

回答の取得に失敗しました

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.25%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問