如何使一个Div's位置(不是子或父)完全链接/依赖于另一个Div's位置

How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?

本文关键字：位置 Div 链接 依赖于 另一个 何使一      更新时间：2023-09-26

我有一堆的功能来操纵一个div的位置，我需要另一个div(不是子或父)跟随任何位置变化自动。

下面是一个非常简单的例子:http://jsfiddle.net/ZHLD5/

<div id="follower"></div>
<div id="main"></div>
$('#main').draggable();

如何在CSS或jquery中实现这一点，而不改变html结构，而不会在draggable()和一堆其他代码中混淆选择器?

所以基本上，如何使一个div的位置(不是子或父)完全链接/依赖于另一个div的位置?

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

另一种方法

只要你使用draggable(jQuery ui)，你可以很容易地实现这样的效果。但是由于这个函数被调用了很多次。不要忘记使用id作为性能选择器。

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

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

相关文章：