javascript - 将 jQuery 偏移量从一个元素复制到另一个元素会将它们放在不同的位置

Question

我的目标是给定 2 个 div，一个带有标记内容，在另一个与第一个垂直对齐的 div 中生成新内容。下面的代码片段是我目前所获内容的一个最小示例。

我试过做一些调整，比如从新元素的顶部偏移量中减去 $('sidebar').offset().top 和/或标题的高度(认为可能由于某种原因，新元素从侧边栏的顶部而不是文档的顶部偏移)，但这仍然没有将它放在正确的位置。

我认为这里的障碍是弄清楚为什么 tag_offset.top 和 test_tip.offset().top 最终不相等，即使这是明确的在实例化 test_tip 时分配。

var tag_offset = $('.jt-tooltip-tag').offset();
tag_offset['left'] = 0;
var tag_text = $('.jt-tooltip-text').text();

var test_tip = $('<div class="jt-sidebar-tip">').text(tag_text).offset(tag_offset).appendTo('#jt-tooltip-sidebar');

.middlebar {
  width: 49%;
  float: left;
}

.sidebar {
  height: 500px;
  width: 49%;
  float: right;
  border: 1px solid purple;
}

.jt-tooltip-tag {
  font-weight: bold;
  background-color: #14c9c9;
}

.jt-tooltip-text {
  display: none;
}

.jt-sidebar-tip {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
  <h1 class="header">
    Omigosh a header!
  </h1>
  <div class="content">
    <div class="middlebar">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec tortor justo. Donec magna neque, interdum eu diam ut, efficitur pharetra ligula. Aenean libero justo, feugiat a est a, hendrerit cursus justo. Donec vehicula ligula ut diam bibendum, vel
      convallis purus blandit. Nulla <span class="jt-tooltip"><span class="jt-tooltip-tag">facilisi.</span><span class="jt-tooltip-text">This should be vertically-aligned with facilisi.</span></span> Donec pretium, leo at commodo dignissim, eros
      ligula vulputate sem, quis iaculis turpis est ac erat. Ut ultrices mauris efficitur tellus gravida convallis vitae ac magna. Nullam vel enim ut eros tempor dictum et quis risus. Aliquam finibus sed justo eu porttitor.
    </div>
    <div class="sidebar" id="jt-tooltip-sidebar">
    </div>
  </div>
</div>

Answer 1

为了相对于文档定位元素，您需要将其 CSS 设置为 position: absolute;。但是您还需要将其 left 偏移量设置为将其放入其容器的位置。我通过复制 $("#jt-tooltip-sidebar").offset().left 完成了此操作。

var tag_offset = $('.jt-tooltip-tag').offset();
tag_offset.left = $("#jt-tooltip-sidebar").offset().left;
var tag_text = $('.jt-tooltip-text').text();

var test_tip = $('<div class="jt-sidebar-tip">').text(tag_text).offset(tag_offset).appendTo('#jt-tooltip-sidebar');

.middlebar {
  width: 49%;
  float: left;
}

.sidebar {
  height: 500px;
  width: 49%;
  float: right;
  border: 1px solid purple;
}

.jt-tooltip-tag {
  font-weight: bold;
  background-color: #14c9c9;
}

.jt-tooltip-text {
  display: none;
}

.jt-sidebar-tip {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
  <h1 class="header">
    Omigosh a header!
  </h1>
  <div class="content">
    <div class="middlebar">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec tortor justo. Donec magna neque, interdum eu diam ut, efficitur pharetra ligula. Aenean libero justo, feugiat a est a, hendrerit cursus justo. Donec vehicula ligula ut diam bibendum, vel
      convallis purus blandit. Nulla <span class="jt-tooltip"><span class="jt-tooltip-tag">facilisi.</span><span class="jt-tooltip-text">This should be vertically-aligned with facilisi.</span></span> Donec pretium, leo at commodo dignissim, eros
      ligula vulputate sem, quis iaculis turpis est ac erat. Ut ultrices mauris efficitur tellus gravida convallis vitae ac magna. Nullam vel enim ut eros tempor dictum et quis risus. Aliquam finibus sed justo eu porttitor.
    </div>
    <div class="sidebar" id="jt-tooltip-sidebar">
    </div>
  </div>
</div>