1

一般的なルールは、divfooに があるときはいつでもposition: relative、親と祖先のいずれにも非静的がないposition場合 (したがって のいずれかが必要relative, absolute, or fixed)、divfooはドキュメント全体に対して相対的な位置になると考えました。

しかし、次のページでは：

http://jsfiddle.net/4RcEn/6/

<div id="box1"></div>
<div id="box2">
    <div id="box3">some text inside some text</div>
</div>

<style>
  #box1 { width: 300px; height: 100px; background: #ffd; margin-left: 60px }
  #box2 { width: 300px; height: 100px; background: #fa0; margin-left: 60px }
  #box3 { width: 100px; height: 80px; background: #af0; position: 
          absolute; left: 20px;  }
</style>

box3実際には次のように動作します: leftis20pxおよび is はドキュメントに対して相対的ですが、top(autoデフォルトでは) であり、実際にはコンテナー divに対して相対的です。が、、またはその他の値にtop設定されている場合のみ、ドキュメントに対して相対的になります。これを支配しているルールは何ですか？00px

PS仕様のルールでは、次のようなルールはありません。 toporleftが指定されていない場合、動作はそのようなものです。したがって、これが指定されていない場合、「包含ブロック（非静的配置ブロックとして定義されている）」がない場合、「初期ブロック」に対して相対的ではないというデファクトスタンダードですか？

4

3 に答える 3

4

ドキュメントに対して相対的に配置されます (これがtop: 0、一番上に移動する理由です) が、top値を設定しない場合 (つまり、そのままにしておく場合auto)、ボックスはその位置から移動する理由はありません。静的位置 ( を設定していない場合、通常は座る場所position: absolute)。

この回答と、仕様のセクション9.3および10も参照してください。特に、セクション 10 には、静的な配置を管理するすべての規則が含まれており、過度に技術的な内容ではないにしても、非常に包括的です。

このようなシナリオで要素が静的な位置に留まるべきであるという正確なルールは、セクション10.6.4にあります。あなたのシナリオでは、topまたはbottomを設定しませんが、を設定heightするため、リストされている6つのルールのうち2番目のルールが適用されます。

2. 'top' と 'bottom' が 'auto' で 'height' が 'auto' でない場合、'top' を静的位置に設定し、'margin-top' と 'margin-bottom' に 'auto' 値を設定します。を 0 にして、「下」について解く

topしたがって、絶対配置要素は、それ以外のものが与えられていない場合、通常の静的な垂直位置にとどまる必要がありますauto— それ自体を任意に移動することは想定されていません。

また、絶対配置要素の包含ブロックは、常に最も近くに配置された祖先が存在する場合、または最初の包含ブロックのいずれかです。

于 2013-02-27T12:04:01.957 に答える
0

div3 が div2 からではなく body から計算している作業です。div3よりもdivの「トップ」位置を特定していないため、div2から「トップ」を取得し、トップポイントをdiv2のトップポイントと同じにします。属性「top: 0px;」を追加すると、dov3 に移動すると、div3 がどこにあり、どの要素が div3 の位置に影響を与えたかがわかります。

于 2013-02-27T12:10:33.403 に答える
0

topCSS 2.1仕様の属性に関するメモから：

このプロパティは、絶対配置されたボックスの上マージンの端が、ボックスを含むブロックの上端からどれだけ下にオフセットされるかを指定します。相対的に配置されたボックスの場合、オフセットはボックス自体の上端を基準にします (つまり、ボックスには通常のフローで位置が与えられ、これらのプロパティに従ってその位置からオフセットされます)。

これは、notopが指定されている場合、ボックスが「自然な」コンテナ (その親) の上部に配置されることを意味します。top が指定されている場合は、relativeまたはポジショニングを使用して最も近い祖先にオフセットされますabsolute(これは私が想定している、htmlまたはbodyデフォルトで持っています)。

次に、次のように言います。

...これにより、外側のボックスの上部が、それを含むブロックに対して配置されます。配置されたボックスの包含ブロックは、最も近い配置された祖先 (存在しない場合は、この例のように最初の包含ブロック) によって確立されます。

于 2013-02-27T12:08:14.683 に答える