position:absoluteの仕様について

質問したいこと

レスポンシブのサイトにて簡単なモーダルを作成しており、
あるボタンをクリックするとモーダルが立ち上がり、表示されたオブジェクトが上下左右中央になるよう配置しようとしています。
方法としてはposition:absoluteを使おうとしています。

そのオブジェクトに背景色を指定した場合、縦横MAXで色が付いたのですがこれは通常仕様でしょうか？？
（※今回縦横のサイズは指定しておりません。）

また、この場合に背景色を使用する場合は、縦横サイズを指定する必要があるのでしょうか？

該当のソースコード

html
1    <div class="modal">
2        <div class="overlay"></div>
3        <div class="object">
4　　　　　　　ここに諸々はいります
5        </div>
6    </div>

css
1
2.modal .overlay{
3    background: rgba(0,0,0,0.8);
4    width: 100%;
5    position: fixed;
6    z-index: 0;
7    top: 0;
8    left: 0;
9}
10.modal .object{
11    background: red;
12    position: absolute;
13    top: 0;
14    bottom: 0;
15    right: 0;
16    left: 0;
17    margin: auto;
18}

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

回答1件

ベストアンサー

そのオブジェクトに背景色を指定した場合、縦横MAXで色が付いたのですがこれは通常仕様でしょうか？？

はい。

今回の場合、 margin プロパティの auto 値は 0 に解決されます。

Otherwise, set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.

そして、 width プロパティが auto であり、 left, right プロパティであるとき width プロパティについて解決され、これは height プロパティに対しても同様です。

'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'

このとき、要素に使用される値を決定する制約は次のように表せるため、当該要素は幅いっぱいに広がります。

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block