cssのエッジオフセット距離

1). 'left'とright'の設定値はすべて「auto」です
「left」および「right」の値がいずれも「auto」(初期値)である場合、計算された値(computed value)は0(たとえば、ボックス領域が元の位置に残る)になります.
2). 'left'または'right'のいずれかの設定値は「auto」です.
leftが「auto」の場合、計算された値(computed value)はrightの負の値(たとえば、ボックス領域はright値に基づいて左にシフト)になります.rightが「auto」と指定されている場合、計算された値(computed value)はleft値の負の値です.
サンプルコード:

<div style="width:20px; height:20px; background-color:red; position:relative; left:100px;"></div>

上記のコードでは、DIV要素は相対的に位置決めされた要素であり、その'left'値は「100 px」であり、'right'は設定されず、デフォルトは「auto」であり、'right'特性計算後の値は-left、すなわち「right:-100 px」であるべきである.
3). 'left'とright'の設定値は「auto」ではありません
「left」も「right」も「auto」でなければ、位置決めが強引で、そのうちの1つは捨てざるを得ない.ブロックを含む「direction」プロパティが「ltr」の場合、「left」が勝利し、「right」値が-leftになります.ブロックを含む「direction」プロパティが「rtl」の場合、「right」が勝つと、「left」値は無視されます.
サンプルコード:

<div style="width:100px; height:100px; overflow:auto; border:1px solid blue;">

    <div style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:60px;"></div>

</div>

最後に、「left」は比較的強いはずだ.

'top'と'bottom'の特性値

'top'および'bottom'プロパティは、そのサイズを変更することなく、相対的に位置決め要素を上または下に移動します.'トップはボックスを下に移動し、「bottom」はそれを上に移動します.'top'と'bottom'はボックスが分割または引張られていないため、計算値は常にtop=-bottomであり、両方が「auto」であれば、その計算値は0であり、そのうちの1つがautoであれば、それは別の負の値である.いずれも「auto」でなければ、「bottom」は無視され、「bottom」の計算値は「top」の値の負の値になります.