如何定位一個DIV相對於另一個不是父母的DIV

我需要製作一個div相對於另一個（作爲子女）div這不是它的父親。不幸的是，我不能在第二個div上使用position:absolute強制它進入第一個，因爲當窗口變小時，div就不合適了。如何定位一個DIV相對於另一個不是父母的DIV

這是我需要發生：

<div id="first" style="position:relative;" > 
    <div id="second" style="position:absolute;"></div> 
</div>

這是我目前有：

<div id="first" ></div> 
<!--there is other content/html between the divs--> 
<div id="second"></div>

有沒有什麼辦法，使第二div相對於第一div？無需更改頁面的HTML代碼。

更多信息：有一段內容輸出到網頁。一旦使用CSS/JQuery輸出內容，我需要重新定位這段內容。所以我需要製作相對於屏幕上已有內容的內容。它不能是第一個div的子項，並且使用position:absolute不會。兩個div彼此並排，並且在頁面的完全不同的端部。

我基本上需要第二個div作爲第一個div的子節點，但它實際上並不是它的孩子。

來源

2013-07-30 Navigatron

不使用純CSS。你必須使用JavaScript/jQuery –

你能詳細說明你想要做什麼嗎？ –

你可以使用transform（translateX和translateY）css3屬性嗎？或者只用負值的邊距。 –

下面是使用JSBin

<div id="first" style='float:left;'></div> 
<div id="second"></div>

來源

2013-07-30 11:45:05

的JavaScript（例如）：

var div1 = document.getElementById('first'); 
var div2 = document.getElementById('second'); 

div1.style.marginTop = div2.offsetTop; //set the margin top of the first div = the margin top of the second div

來源

2013-07-30 11:45:26

如果您知道#first元素的寬度和高度，那麼你就可以做到以下幾點：

<div class="parent"> 
    <div id="first"></div> 
    <div id="second"></div> 
</div>

.parent{ 
    width: 200px; 
    height: 200px; 
    background-color: green; 
} 

#first{ 
    width: 100%; 
    height: 100%; 
    background-color: blue; 
} 

#second{ 
    min-width: 20px; 
    min-height: 20px; 
    background-color: red; 
    margin-top: -200px; /* equal to #first height */ 
    max-width: 200px; /* equal to #first width */ 
    max-height: 200px; /* equal to #first height */ 
    word-break: break-all; 
    overflow:auto; 
}

jsFiddle

來源

2013-07-30 12:01:28

如何定位一個DIV相對於另一個不是父母的DIV

回答

相關問題