將絕對div定位為其父父級

Question

我有三個嵌套div的結構

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

所有三個div都是絕對的。現在我希望#div3根據#div1定位，如果我#div3是right:0px; 然后它應該到#div1最右邊

注意請不要要求更正我未開發的結構， #div1和#div2不在我的控制范圍內。

我只有想法是移動#div3並通過jQuery將其附加到#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  }

Answer 1

如果div3的位置是絕對的，它會查看他的祖先，直到它找到一個相對定位的父級。 為了達到你想要的，你需要：

#div1 { position: relative; }
#div2 { position: static; } // default positioning for DIVs
#div3 { position: absolute; right: 0; }

Answer 2

使用position()方法獲取相對於它的父DIV1 DIV2位置，並將這些值用作負數，以使DIV 3看起來在div1中。

以下應將DIV3放在DIV1左上角

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

演示： http ： //jsfiddle.net/q5RgZ/1

另一個簡單的解決方案是將div3移出div2並放在div1中

$('#div3').appendTo('#div1')

Answer 3

將#div1位置設置為relative應該可以解決問題。 但是如果在#div1使用position:absolute是必需的，那么包含這三個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;
}