使用 jQuery offset(） 将绝对定位的 DIV 设置为另一个 DIV 的相同 y 坐标

Setting absolute positioned DIV to the same y-coordinate of another DIV using jQuery offset()

本文关键字：DIV 设置 另一个 坐标 定位 offset jQuery 使用      更新时间：2023-09-26

我似乎无法在互联网上找到答案，并且jQuery offset（）似乎没有按预期工作。情况如下：

我正在尝试做的是垂直对齐到两个div。一种是位置不确定的内联块（y 坐标取决于有多少后续内容。另一个div 有免费信息，我希望它位于另一个div 的一侧，位于网站的边距状区域。

根据我对jQuery.offset（）如何工作的理解，它应该能够获取内容div相对于文档的坐标，然后可以用来分配边缘div的绝对位置。但是，当我在内容div上调用offset（）时，我得到的位置（0px，0px）显然是不准确的。

我这样做的方式是错误的吗？

这是我的代码： 

// Find the div we want to position to (works)
var related_node = $('#content-note-n').attr('data-nid');
var node_obj = $('#node-' + related_node);
// Get the offset position of that div (does not work- returns 0,0)
var position = node_obj.offset();
alert("Top: " + position.top);
$('#content-note-n').css('top', position.top);

这是相关的HTML（我使用的是CMS，所以这大大简化）：

<section id="zone-content">
  <aside id="region-side">
     <div id="content-note-n" data-nid="n">
       <h3>Note N</h3>
     </div>
  </aside>
  <div id="region-content">
    <div id="node-n">
      <div class="node-content">
         <p>Content for Node N</p>
      </div>
    </div>
  </div>
</section>

如果这也有帮助，可以发布 CSS，但没有一个元素是 display=none，jQuery 说这会破坏 offset（）。

更新：

尝试将我的确切代码复制到 jsFiddle（不包括 css）中，它在那里按预期工作。现在将尝试通过 css 复制。

更新：

将所有CSS也复制到jsFiddle中，它仍然可以工作。我很困惑。

我尝试了一个测试用例...这对我来说很好用：-

<script type="text/javascript">
$(document).ready( initialise );
function initialise() {
var myObject = $("#my_div");
var myposition = myObject.offset();
$("#positioned").css({ 'top' : myposition.top , 'left' : myposition.left });
}
</script>

使用此 HTML

<body>
<div id="positioned" style="position:absolute;">overlap</div>
<div>Hello</div>
<div style="margin: 50px"><div id="my_div" type="text" name="name">original</div></div>
</body>

内容节点由 CMS 打印两次。一个在内容部分，另一个在隐藏部分（位于元素层次结构中可见部分的上方）。 jQuery仅返回隐藏部分中的节点，因此位置为0。当我向选择器添加一个类时，jQuery开始返回两个元素，这就是我发现这个问题的方式。我的猜测是，因为我发送的是一个只有 ID 标识符的选择器字符串，jQuery 智能地只发回一个元素。

因此，要回答原始问题，最佳做法当然是更改CMS打印节点隐藏副本ID的方式。快速解决方法是将"#section 内容"添加到选择器中，使其成为"#section 内容 #node-n"。

相关文章：