質問: 100 となり、実際は「100px」ぐらいしか動かない、という認識です。 正直何故このような現象が起きているのか分からないので、何か分かる方、ご教授お願い致します。 ### 【参考にしてみたが、多分違う気がする】 left - CSS: カスケーディングスタイルシート | MDN →こちらの「過剰指定」という単語が気になりますが、内容がそれじゃない気がしています。
回答: こんにちは。 仕様としてはこのあたりの話です。 > > 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block > > ... > > If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value. > > 10.3.7 Absolutely positioned, non-replaced elements | Visual formatting model details > > > この「over-constrained」が「過剰指定」のことなのです。 正確に言うと、「過剰指定」とは上記等式に書かれた`left` `margin-left` `width` `margin-right` `right`の値全てが`auto`ではないこと、となっています。 つまり、細かい話で申し訳ないのですが、ご質問の件は`margin:auto`であるため**「過剰指定」ではありません**。 以下の表がわかりやすいです。 ご質問の場合、`left` `width` `right`が`auto`ではなく、`margin-left` `margin-right`が`auto`のため、 ✘ ✘ ✘ ✔ ✔ の欄が該当します。 「right margin gets negative free space」となっていますので、右マージンがマイナスになることによって解決されます。 さて、ご質問の場合の詳細な計算ですが、たとえば、`width of containing block`(包含ブロックの幅)が`1600px`だと仮定しましょう。 まず、初期状態です。 上記式の `'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block` に当てはめると、初期状態は以下のようになります。 `1150 + auto + 0 + 0 + 300 + 0 + 0 + auto + 0 = 1600` これを解くと、 `auto = 75` となりますので、`margin: auto`は水平方向には`margin-left: 75px; margin-right: 75px;`として解決されます。 つまり、ボックスは、左から`1150+75=1225px`の位置に表示されます。 次に、is-move状態です。 上記式の `'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block` に当てはめると、is-move状態は以下のようになります。 `1150 + auto + 0 + 0 + 300 + 0 + 0 + auto + 800 = 1600` これを解くと、 `auto = -325` となりますが、前述の通りにautoがマイナスになる場合右マージンがマイナスになることによって解決されるので、`margin: auto`は水平方向には`margin-left: 0; margin-right: -650px;`として解決されます。 (開発者ツールで見ると、マージンが変なところに表示されているかと思います。) つまり、ボックスは、左から`1150+0=1150px`の位置に表示されます。 !イメージ説明 ということで、ボックスはマージンが変化した分の100px程度しか動かないように見えると思います。