位置絕對格參考它的父母

我有三個嵌套的div結構位置絕對格參考它的父母

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

所有這三個的div是absolute.Now我想要的#div3根據#div1 被定位，如果我#div3是right:0px;然後應該到最右邊的#div1

注意請不要問糾正結構，因爲它不是由我和#div1和發展#div2不在我的控制之下。

只有我的想法是移動#div3和jQuery.but其追加到#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 }

來源

2012-10-18 Champ

而這裏是：你嘗試過什麼？ – VisioN

目前正在應用什麼CSS？由於三個div的位置是絕對的，因此div 3將相對於div 2進行定位。爲了使其與div 1的右對齊，div2必須具有寬度或位置，以使其右邊框與div 1的右邊框對齊。 –

的CSS和HTML是大我不能發佈它聽到，所以我不得不嘗試做一個小規模的例子 – Champ

使用position()方法來獲得相對DIV2位置到它的父DIV1，爲了使DIV 3出現使用這些值作爲負在div1中。

繼應將DIV3在左上角DIV1

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

DEMO：http://jsfiddle.net/q5RgZ/1

另一種簡單的解決辦法是在DIV1移動DIV3出DIV2和地方

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

來源

2012-10-18 11:57:39 charlietfl

不錯的想法.... – Champ

如果div3的位置是絕對的，它會看在他的祖先，直到找到真實相對定位的父。爲了實現你想要你需要什麼：

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

來源

2012-10-18 10:18:48 Juanjo

我已經說過，它不可能改變的CSS OD'＃div1'和'＃div2' – Champ

-1

設置#div1位置相對應該做的伎倆。但是如果在#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; 
}

來源

2012-10-18 10:25:13

位置絕對格參考它的父母

回答

相關問題