Javascript 如何制作一个Div'；s位置（非子级或父级）完全链接/依赖于另一个Div'；什么位置？

我有一系列操作一个div位置的功能，我需要另一个div（不是子div或父div）来自动跟踪任何位置更改

下面是一个非常简单的说明：

$（'#main'）.draggable（）；

如何在CSS或jquery中实现这一点，而不改变html结构，也不干扰

draggable（）

中的选择器和一堆其他代码

---

因此，基本上，如何使一个div的位置（不是子div或父div）完全链接/依赖于另一个div的位置？

您可以使用CSS属性，而不必使用js。您可以访问并检查它们是如何工作的，以便更好地理解它们。在我看来，你应该这样做：

<div class="page_holder">
 <div class="stuck"></div>
 <div class="page">
    <div class="container">
        <div class="content"></div>
    </div>
 </div>
</div>

这里还有另一种方法

只要使用Dragable（jQueryUI），就可以像这样轻松地实现它。

---

但是因为这个函数叫做alot。别忘了用id作为性能的选择器。

你已经限制了自己，说它不可能是孩子。如果可能的话，你可以给它相对/绝对的位置和负左/上等于它的宽度/高度，使它看起来像一个兄弟。因为它是一个孩子，虽然，它会跟随父母左右，并给你描述的效果。我知道，但在我的情况下，改变html结构是不可能的。如果必须的话，我宁愿使用选择器。除此之外，我认为使2个div相互依赖将是一段相当简单且非常实用的代码似乎是解决方案。suish给出的公认答案也有效。有效，谢谢。我刚刚“发现”了另一个显而易见且简单的解决方案，它肯定能解决所有问题：

$（“#follower”）.appendTo（“#main”）

@astx123您所说的是更改html结构，如果您的意思是“不编辑html文件”，那么这是更好的方法。我刚刚检查了一下，您是对的。我一定要使用你的解决方案，因为追随者必须留下来。

<div class="page_holder">
 <div class="stuck"></div>
 <div class="page">
    <div class="container">
        <div class="content"></div>
    </div>
 </div>
</div>

.page_holder{
  position: absolute;
  top:50px;
  left:200px;
  width:200px;
  height:300px;
}
.page {
  position: absolute;
  top:0;
  left:0;
  width:200px;
  height:300px;
  overflow:auto;
  z-index: 1;
}
.container {
  position:relative;
}
.stuck {
  position: absolute;
  top:0;
  right:0;
  left:0;
  height:50px;
  background:blue;
  margin-right: 18px;
  z-index: 2;
}
.content {
  height:700px;
  background:gray;
}

$('#main').draggable({
  drag: function( event, ui ) {
    $('#follower').css({
      top: ui.position.top,
      left: ui.position.left
    });
  }
});