jquery - 相对于非父 div 的位置 div - 这可能吗？

Question

是否可以将 div 相对于另一个不是父级的 div 定位？例如:

<div id="header"><!-- --></div>
<div id="content"><!-- --></div>
<div id="footer"><<!-- --></div>

在上面的代码中，#footer可以相对于#header定位吗？

更新

我问是因为我打算实现的设计的语义结构与我想要呈现它的方式不匹配。在视觉上，我将在页面顶部有一个菜单和一个隐藏的 div，它将在单击事件时滑入菜单上方。因此，我需要打乱顺序或 div，使 #menu 相对位于 #header 下方，并在 #header 时保持相对位置> 在 jQuery slideToggle() 事件中滑入。

<div id="menu"><!-- --></div>
<div id="header"><!-- --></div>
<div id="content"><!-- --></div>
<div id="footer"><<!-- --></div>

#header 应该固定在窗口的顶部。 #menu 应该相对于 #header 定位，这样当 #header 滑入时，#menu 向下滑动相同的距离。

Answer 1

是的。您还没有说您希望它们如何定位，但您可以使用 offset 获取 #header 的当前位置像这样:

var pos = $("#header").offset();

...并且您可以根据需要通过 css 设置 #footer 的位置:

$("#footer").css({
    position: "absolute",
    left:     /* some value here*/,
    top:      /* some value here*/
});

...或通过 offset :

$("#footer").offset({
    left:     /* some value here*/,
    top:      /* some value here*/
});

...根据标题的位置(在任何一种情况下)您可以在其中填写所需的左侧和顶部值。

offset 接受left 和top 的数字。 Archer在评论中告诉我们 css 也一样，并为我们添加了 "px"，这似乎确实有效，尽管我没有在文档中看到它，所以我总是把“px”放在自己身上。