2009-06-17 12 views
1

これは、私がレイアウトを修正しているときに常に持っている1つの問題です。私は絶対的に位置づけられたDIVを持っています。私はその中に絶対的な位置付けが必要な子DIVを配置します。しかし、私は本当にこの子 - DIVが親に相対して行動するようにしています...これも可能ですか?または、ラップDIVを作成する必要がありますか?絶対的な位置に置かれた親DIVに対して、絶対的にDIVの位置が決まっていますか?

<div class="container" style="position:relative;"> 
    <div class="parent" style="position:absolute;"> 

     <!-- this child div will behave relative to .container --> 
     <div class="child" style="position:absolute;"></div> 
    </div> 
</div> 

これは、私はむしろ避けたい「ラッピング」ソリューションです:

<div class="container" style="position:relative;"> 
    <div class="parent" style="position:absolute;"> 
     <div class="wrapper" style="position:relative;"> 

      <!-- this child div will behave relative to .wrapper--> 
      <div class="child" style="position:absolute;"></div> 
     </div> 
    </div> 
</div> 

答えて

1

絶対配置要素は、配置されていない最も近い祖先のエッジに対して配置されます(つまり、静的ではありません)。

親要素位置:絶対であるため、子はそのエッジに対して配置されます。

あなたはすでに持っている行動をどのように取得するよう求めているようです。あなたの最初の例のコメントは間違っているようです。

0

あなたは本当に複数の、ネストされた絶対位置のエレメントを使用する必要がある場合は自問する必要がある場合があります。

それ以外の場合は、ラッパーソリューションを使用することをお勧めします。

1

既に1つのdivを絶対的に配置している場合は、子供用に2つのオフセットを一緒に追加することはできませんか?例えば#oneは#oneする10,10の相対、

#one { 
    position: absolute; 
    left: 10px; 
    top: 10px; 
} 

#two { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
} 

で10,10と#twoであること、またはそれが右下に左上隅と#twoに#oneロックのような凝った、であるために#oneの場合、基本的な数学はそのようには機能しません。その場合、恐らく余分なdivが必要になるでしょう。

私は疲れて何かを逃していますか?

関連する問題