大規模なプロジェクトでは、IE でいくつかのボタンが正しく配置されていませんでした。position: absoluteパラメータなしで設定することで、偶然にも修正を見つけました。そのような位置のデフォルト値は何ですか? 絶対配置がどのように機能するか、および含む要素が何を意味するかを理解しています。しかし、デフォルト値がどこから来たのかわかりません。それらはtop:0; left:0、私が最初に期待したものとはまったく異なります。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
position:absolute;
}
</style>
</head>
<body>
<h1>Absoulute pos</h1>
<p>Paragraph</p>
</body>
</html>
これは単純なページで、h1 要素の最終的な配置は次のようになります。
ご想像のとおり、これらすべてのプロパティの初期値は ではありません0。ですauto。それらのプロパティ定義は、仕様のセクション 9.3.2にあります。
絶対配置されたボックスがすべてのオフセットを保持するauto場合 (つまり、それらを変更しない場合)、どこにも移動しません。静的な位置にとどまります。これは基本的に、まったく配置されていない場合、レイアウト内の通常の場所を意味します。セクション 10にはすべての詳細があります (「静的位置」の意味を説明する段落全体も含まれています) が、10.3.7に焦点を当てる必要があります。
これらの要素に使用される値を決定する制約は次のとおりです。
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right ' = 包含ブロックの幅
'left'、'width'、'right' の 3 つすべてが 'auto' の場合: 最初に 'margin-left' と 'margin-right' の 'auto' 値を 0 に設定します。ブロックを含む静的位置を確立する要素のプロパティは「ltr」であり、「左」を静的位置に設定し、以下のルール番号3を適用します。それ以外の場合は、'right' を静的な位置に設定し、以下のルール番号 1 を適用します。
[...]
1. 'left' と 'width' が 'auto' で 'right' が 'auto' でない場合、幅は縮小してフィットします。次に、「左」を解きます
そして10.6.4 :
絶対配置要素の場合、使用される垂直寸法の値は次の制約を満たす必要があります。
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom ' = 包含ブロックの高さ
'top'、'height'、および 'bottom' の 3 つすべてが自動の場合、'top' を静的位置に設定し、以下のルール番号 3 を適用します。
[...]
3. 'height' と 'bottom' が 'auto' で 'top' が 'auto' でない場合、高さは10.6.7 のコンテンツに基づいており、 'margin-top' と 'margin' に 'auto' 値を設定します-bottom' を 0 にして、'bottom' について解く