javascript - jquery.offset() 方法的非常奇怪的行为

Question

做完之后

$view.offset({
   left : X, //X is the same each time
   top : this.y
});
console.log($view.offset()); //outputs what it should

对于多个对象。我(在 firebug 中)看到以下 html 代码

<div id="4017" class="text-block" style="position: relative; top: 2px; left: 22px;">
<div id="4043" class="text-block" style="position: relative; top: 41px; left: -64px;">
<div id="4053" class="text-block" style="position: relative; top: 80px; left: -95px;">
<div id="4081" class="text-block" style="position: relative; top: 119px; left: -135px;">

left 对于所有 div 应该是相同的(如果每个 div 的 left 都相等的话，就会显示出来)。为什么每个 div 的 left 都不相同，尽管显示的结果是所有 div 的 left 都相同？

在 CSS 中我有:

div.text-block {
   display: inline-block;
}

提前谢谢您!

UPD: div 位于其他三个 div 旁边:

<div id="app-container">
    <div id="canvas-container">
        <div id="canvas">
            <!-- divs are located here -->
        </div>
     </div>
</div>

在各自的 CSS 中我有:

#canvas {
  position: absolute;
  background-color: white;
  width: 100%;
  height: 100%;
}

#app-container {
  height: auto !important;
  min-height: 100%;
}

#canvas-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Answer 1

正如 jQuery documentation 中所述,

.offset( coordinates )

Description: Set the current coordinates of every element in the set of matched elements, relative to the document.

因此，如果您的元素位于相对于文档未位于位置 (0, 0) 的其他元素中，则会应用偏移量。

<小时/>

编辑

相对定位的内联元素具有相同的左值: