使用jQuery offset（）将绝对定位的DIV设置为另一个DIV的相同y坐标
[英]Setting absolute positioned DIV to the same y-coordinate of another DIV using jQuery offset()
问题描述
I can't seem to find the answer on the internet, and the jQuery offset() doesn't seem to be working as intended. 
我似乎无法在互联网上找到答案，并且jQuery offset（）似乎未按预期工作。 Here's the situation: 情况如下：
What I am trying to do is vertically align to two divs. 我想做的是垂直对齐两个div。 One is an inline-block with indeterminate location (y-coordinate depends on how much proceeding content there is.) The other div has complimentary information, and I want it to sit to the side of the other div in a margin like area of the site. 一个是位置不确定的内联代码块（y坐标取决于要处理的内容的数量。）另一个div具有补充信息，我希望它位于另一个div的侧面，与现场。
To my understanding of how jQuery.offset() works, that should be able to acquire the coordinates of the content div relative to the document, which can then be used to assign the absolute position of the marginal div. 据我了解jQuery.offset（）的工作原理，它应该能够获取内容div相对于文档的坐标，然后可以将其用于分配边缘div的绝对位置。 However, when I call offset() on the content div, I get a position of (0px,0px) which is clearly inaccurate. 但是，当我在内容div上调用offset（）时，得到的位置（0px，0px）显然不准确。
Am I going about this the wrong way? 我会以错误的方式处理吗？
Here is my code: 这是我的代码：
// 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);
Here is the relevant HTML (I'm using a CMS, so this is vastly simplified): 这是相关的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>
Can post CSS if that also helps, but none of the elements are display=none, which jQuery says will break offset(). 可以发布CSS（如果这样做也有帮助），但是所有元素都不是display = none，jQuery表示这会破坏offset（）。
Update: 更新：
Have tried copying my exact code into jsFiddle (excluding css), and it works as intended there. 尝试将我的确切代码复制到jsFiddle中（css除外），并且可以按预期工作。 Will now try copying over css. 现在将尝试通过CSS复制。
Update: 更新：
Copied over all of the CSS too into jsFiddle, and it works still. 也将所有CSS复制到jsFiddle中，并且仍然可以正常工作。 I'm so confused. 我很混乱。
2 个解决方案
解决方案1
0 2013-09-10 14:57:07
I tried a test case ... this works fine for me :- 我尝试了一个测试用例...这对我来说很好：-
<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>
with this html 这个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>
解决方案2
0 2013-09-10 17:09:05
The content node was being printed twice by the CMS. 内容节点已由CMS打印两次。 One in the content section, the other in a hidden section (which sat above visible one in the element hierarchy.) jQuery was returning only the node from the hidden section, hence the 0 position. 内容部分中的一个，隐藏部分中的另一个（位于元素层次结构中可见部分的上方）。jQuery仅从隐藏部分返回节点，因此返回0位置。 When I added a class to the selector, jQuery began returning two elements, which is how I discovered this issue. 当我向选择器添加一个类时，jQuery开始返回两个元素，这就是我发现此问题的方式。 My guess is that because I was sending a selector string with only an ID identifier, jQuery was intelligently only sending back a single element. 我的猜测是，因为我发送的是只有ID标识符的选择器字符串，所以jQuery聪明地只发送了一个元素。
So to answer the original question, the best practice is to of course alter how the CMS prints the ID for the hidden copy of the node. 因此，要回答原始问题，最佳实践当然是更改CMS如何为节点的隐藏副本打印ID。 The quick fix though was to add "#section-content" to the selector to make it "#section-content #node-n". 不过，快速解决方案是将“＃section-content”添加到选择器中，使其成为“＃section-content＃node-n”。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.