Question

我需要制作一个div相对于另一个（充当孩子）div而不是它的父亲。遗憾的是，我无法在第二个position:absolute上使用div来强制它进入第一个{1}}，因为当窗口变小时，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的孩子，而不是它实际上是它的孩子。

Answer 1

使用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

Answer 2

如果您知道#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

Answer 3

这是JSBin

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

如何将DIV相对于另一个不是父母的DIV定位

3 个答案: