3

次の場合を考えてみましょう。

   <div id="d1" style="position:relative">
    <div id="d2" style="position:absolute">
     <div id="d3" style="position:absolute">
     </div>
    </div>
   </div>

リンクを参照することにより、が相対的

であることを確認しました。の絶対位置を指定しても。同様に、以下のように配置するとどうなりますか？（絶対内の相対）<div id="d3"><div id="d2">
<div id="d2">

<div><div><div>

   <div id="d1" style="position:relative">
    <div id="d2" style="position:absolute">
     <div id="d3" style="position:relative">
     </div>
    </div>
   </div>

誰かがこれを説明できますか？

4

3 に答える 3

3

relativedivがそのd3親に対して相対的な位置を維持することを期待します。物事の配置方法の詳細については、CssのW3仕様を参照してください。

これに影響を与える可能性のあるボックスモデルの個々のブラウザには癖があるので、私は強調する必要があります。

この簡単なデモについては、 JSFiddleHereを参照してください。

于 2012-12-03T16:09:45.587 に答える
3

与えられたhtml/markup

 <div id="d1" style="position:relative">
  <div id="d2" style="position:absolute">
   <div id="d3" style="position:relative">
   </div>
  </div>
 </div>

div＃d1

  • div＃d1は、ドキュメントの通常のフローのままになります。

  • div＃d1にはオフセットプロパティ（Top、Right、Bottom、Left）がないため、現在の場所に正確に残ります。つまり、その位置は、位置がない場合のようになります。相対が適用されます。

  • div＃d1は、div＃d2の新しいポジショニングコンテキストとして機能します。

div＃d2

  • div＃d2は、ドキュメントの通常のフローから削除されます。

  • div＃d2は、div＃d1を基準にして配置されます。

div＃d3

  • div＃d3はドキュメントの通常のフローのままですが、そのフローはdiv＃d2によって決定されます。

10ステップでCSSポジショニングを学ぶ

于 2012-12-03T16:27:50.107 に答える
0

@Kamiが言ったdiv#d3ように、その親に相対的である必要があり、ここに示されています-よりよく説明するためにjsFiddleをまとめたので、さまざまな結果で遊ぶことができます。

jsFiddle： http: //jsfiddle.net/3ezcV/

于 2012-12-03T16:16:06.840 に答える