0

私は3つのネストされたdivの構造を持っています

<div id="div1"> 
   <div id="div2">     // has come content
      <div id="div3"> 
                        // has some content with a form
      </div>
   </div>
</div>

3 つの div はすべて絶対です。今、私がそうである 場合に#div3応じて配置したい場合は、最も右側に移動する必要があります#div1#div3right:0px;#div1

注:#div1構造は私が作成したものではなく、私の管理下にないため、構造の修正を求めないでください#div2。

私が持っている唯一のアイデアは、を移動してjQuery#div3で追加することですが、可能であれば#div1純粋なCSS解決策が欲しいです。そうでなければ私はと一緒に行きますjQuery append

cssが不要になることをよく説明したと思います。しかし、それはCSSだと聞きます 

#div1 {
position: absolute;
display: none;
}

#div2 
{
position: absolute;
top: 85px;
left: 56px;
width: 300px;
z-index: 2;
}

#div3 {//what ever you want to write to make it relative to #div1  }
4

3 に答える 3

2

の位置div3が絶対的な場合、相対的な位置にある親が見つかるまで先祖を調べます。必要なものを達成するには：

#div1 { position: relative; }
#div2 { position: static; } // default positioning for DIVs
#div3 { position: absolute; right: 0; }
于 2012-10-18T10:18:48.000 に答える
1

position()メソッドを使用してそのDIV2親DIV1を基準にした位置を取得し、それらの値を負として使用して、DIV3がdiv1にあるように見せます。

以下はDIV3の左上隅に配置する必要がありますDIV1

var div2Pos= $('#div2').position();
$('#div3').css({top: 0-div2Pos.top, left: 0-div2Pos.left})

デモ：http：//jsfiddle.net/q5RgZ/1

もう1つの簡単な解決策は、div3をdiv2から移動し、div1に配置することです。

$('#div3').appendTo('#div1')
于 2012-10-18T11:57:39.157 に答える
-1

位置を相対に設定#div1するとうまくいくはずです。ただし、 in を使用position:absoluteする#div1必要がある場合は、これら 3 つの div タグを含む要素で を使用する必要がありますposition:relative。このような：

HTML:

<div id="container">
  <div id="div1"> 
     <div id="div2">     // has come content
        <div id="div3"> 
                        // has some content with a form
        </div>
     </div>
  </div>
</div>

CSS:

#container {
  position: relative;
}
于 2012-10-18T10:25:13.780 に答える