javascript - 将 div 定位在另一个 div 的位置

Question

我正在尝试将一个 div 恰好放在另一个之上。我是通过 JQuery(而不是 css)来完成的，因为我有 3 个元素。当鼠标经过其中一个元素时，我希望 div 将自身定位到该元素。

我终于让它工作了，但是当 div 移到该元素时，div 移到那里，并向左添加 8px。

如何将 div 定位到另一个元素的准确位置？

JSFiddle

$('.inner').mouseover(function() {
  var pos = $(this).position();
  $("#back").css('left', pos.left + "px");
});

#wrapper {
  width: 600px;
  height: 30px;
}
.inner {
  display: block;
  float: left;
  width: calc(100% / 3);
  height: 50px;
}
#back {
  background-color: yellow;
  height: 100%;
  z-index: -1;
  width: calc(100% / 3);
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="inner">First Option</div>
  <div class="inner">Second Option</div>
  <div class="inner">Third Option</div>
  <div id="back"></div>
</div>

Answer 1

.wrapper 应该是相对位置，.back 应该是绝对位置

$('.inner').mouseover(function() {
  var pos = $(this).position();
  $("#back").css('left', pos.left + "px");
});

#wrapper {
  width: 600px;
  height: 30px;
  position: relative;
}
.inner {
  display: block;
  float: left;
  width: calc(100% / 3);
  height: 50px;
  background-color: green;
  
  
}
#back {
  background-color: yellow;
  height: 100%;
  z-index: 125;
  width: calc(100% / 3);
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="inner">First Option</div>
  <div class="inner">Second Option</div>
  <div class="inner">Third Option</div>
  <div id="back"></div>
</div>