Html 我如何定位一个DIV相对于另一个DIV的位置，而不是它'；父母

我需要使一个

div

相对于另一个（作为子对象）

div

而不是其父对象。不幸的是，我不能在第二个

div

上使用

position:absolute

强制将其放入第一个，因为当窗口变小时，

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的子div，而不是它的子div

使用javascript（例如）：

---

如果您知道

#first

元素的宽度和高度，则可以执行以下操作：

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

---

不使用纯CSS。您必须使用JavaScript/jQueryCan详细说明您正试图做什么？您可以使用transform（translateX和translateY）css3属性吗？或者只使用带负值的边距。只需发布您或我需要的第一个

div

作为第二个

div

的父级。因此，我可以将第二个div设置为

position:absolute

，它将保持在第一个

div

中，即

position:relative

。除此之外，

div

的实际HTML不是父/子。它们的设置如上所示<代码>

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

<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;
}