max-widthが適用されません。widthだと効きます。

こんにちは！
以下内容のHTMLとCSSでセレクタ#z2の要素が表示されません。

・#z2のcssでmax-widthとなっている箇所をwidthに変更すると要素が表示されます。
・#z2のposition: absoluteを削除すると要素が表示されます。

そこで質問なのですがmax-widthだと表示されない原因は何なのでしょうか？

親要素#z1はwidth: 100%なので表示されてもいいと思うのですが。
詳しい方、教えていただけますと幸いです。

HTML
1<div id="z1">
2    <div id="z2">
3    </div>
4</div>

CSS
1#z1 {
2  z-index: 1;
3  position: fixed;
4  top: 0;
5  left: 0;
6  width: 100%;
7  height: 100%;
8  background: rgba(0, 0, 0, 0.8);
9}
10#z2 {
11  z-index: 2;
12  position: absolute;
13  max-width: 500px;
14  height: 500px;
15  border: 1px solid #828282;
16  background: #fff;
17}

行動規範の内容に同意します

回答1件

ベストアンサー

div要素はブロックレベル要素なので、初期値（何も指定しない、またはwidth:auto）では親要素の幅一杯に広がります。下記で確認してみてください。

css
1#z2 {
2  z-index: 2;
3  height: 500px;
4  border: 1px solid #828282;
5  background: #fff;
6}

この状態から、max-width: 500px;を設定すれば親要素の幅が500px以上の場合は、500pxに制限されます。それ以下なら、親要素の幅になります。

position: absolute; を設定すれると、通常のフローから外れ、サイズを指定しないと幅と高さは0になります。下記で確認してみてください。

css
1#z2 {
2  z-index: 2;
3  position: absolute;
4  border: 1px solid #828282;
5  background: #fff;
6}

position - CSS: カスケーディングスタイルシート | MDN
absolute

要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。

この状態から、max-width: 500px;を指定してももともと幅は0なので0のままです。

投稿2020/11/29 02:51

hatena19

総合スコア33699

kg1008

2020/11/29 05:53

ご回答ありがとうございます！ div要素に```position: absolute;```を設定した場合・親要素がなくなる（通常のフローから外れる）・div要素にwidth、heightを設定しない場合、幅と高さは親要素に依存するので0になる・max-widthも同様に親要素に依存するので0になるという認識であっていますでしょうか。よろしくお願いいたします。