为什么将 div1 位置设置为 div2 的顶部和左侧偏移 + div2 的宽度不会将其定位到右上角？

Question

function handler(ev) {
        var target = $(ev.target);
        if( target.is(".item") ) {
     var brt = $(target).offset().top;
     var let = $(target).offset().left + $(".test").width();
     
     $('#DivToShow').css({'top':brt,'left':let, 'display':'block', 'z-index':'10'});
        }
   }
   $(".item").mouseover(handler);

body {
font: 1em/1.67 'Open Sans', Arial, Sans-serif;
margin: 0;
background: #010101;
}

.masonry {
margin: 10em 10em;
padding: 0;
-moz-column-gap: 4.3em;
-webkit-column-gap: 4.3em;
column-gap: 4.3em;
font-size: .85em;
}

.item {
display: inline-block;
background: #3D3D3D;
color: white;
padding: 1em;
margin: 0 0 1.5em;
width: 100%;
border: 1px solid #737373;
border-radius: 5px;
text-align: center;
}

.item:hover {
-webkit-filter: contrast(.2);
filter: contrast(.2);
}

@media only screen and (min-width: 400px) {
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (min-width: 700px) {
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

@media only screen and (min-width: 900px) {
.masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}

@media only screen and (min-width: 1100px) {
.masonry {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}

.item .img_1 {
display: block;
height: 130px;
width: 275px;
margin: 0 auto;
padding-bottom: 10px;
}

<script src="http://www.sethjfreeman.com/Resources/jquery-3.1.1.js"></script>
<div id="DivToShow" style="height: 100px; width: 100px; background: green; display: none; position: absolute;"></div>
  <div class="masonry">
     <a href="/ProjectHolder/WebProjects/GoogleReplica/index.php"><div class="item test"><img src="http://www.sethjfreeman.com/HomePage/ItemImages/GoogleReplica.png" class="img_1">Google.com Replica</div></a>
      <a href="/ProjectHolder/WebProjects/PhPToMySQLStoringFormInformation/index.php"><div class="item">Php Form <br> MySQL Database</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
      <a href=""><div class="item">...</div></a>
  </div>

描述：
当我计算 div 与 class （项目）左侧和顶部 + 宽度的偏移量时，它不会将 div 与 id (DivToShow) 定位在右上角。它使它接近，但不准确。为什么会这样，我该如何解决？

Answer 1

第一。因为你有 var target = $(ev.target); 你可以只使用 target 你不需要 $(target).

第 2 target.offset().top - $('#DivToShow').height(); 您需要删除显示项目的高度，以便它显示在您悬停的项目上方

3rd 宽度使用 <div class="item">...</div> 的 parent() 即：

（尽量不要使用名称 let，因为 let 是 javascript 的语法，它可能会使人感到困惑，哈哈（来源：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let））

  <a href="">
    <div class="item">...</div>
  </a>

选项 1：

function handler(ev) {
  var target = $(ev.target);
  if (target.is(".item")) {
    var brt = target.offset().top - $('#DivToShow').height();
    var mylet = target.parent().offset().left + target.parent().width();

    $('#DivToShow').css({
      'top': brt,
      'left': mylet,
      'display': 'block',
      'z-index': '10'
    });
  }
}
$(".item").mouseover(handler);

body {
  font: 1em/1.67 'Open Sans', Arial, Sans-serif;
  margin: 0;
  background: #010101;
}

.masonry {
  margin: 10em 10em;
  padding: 0;
  -moz-column-gap: 4.3em;
  -webkit-column-gap: 4.3em;
  column-gap: 4.3em;
  font-size: .85em;
}

.item {
  display: inline-block;
  background: #3D3D3D;
  color: white;
  padding: 1em;
  margin: 0 0 1.5em;
  width: 100%;
  border: 1px solid #737373;
  border-radius: 5px;
  text-align: center;
}

.item:hover {
  -webkit-filter: contrast(.2);
  filter: contrast(.2);
}

@media only screen and (min-width: 400px) {
  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media only screen and (min-width: 700px) {
  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media only screen and (min-width: 900px) {
  .masonry {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media only screen and (min-width: 1100px) {
  .masonry {
    -moz-column-count: 5;
    -webkit-column-count: 5;
    column-count: 5;
  }
}

.item .img_1 {
  display: block;
  height: 130px;
  width: 275px;
  margin: 0 auto;
  padding-bottom: 10px;
}

<script src="http://www.sethjfreeman.com/Resources/jquery-3.1.1.js"></script>
<div id="DivToShow" style="height: 100px; width: 100px; background: green; display: none; position: absolute;"></div>
<div class="masonry">
  <a href="/ProjectHolder/WebProjects/GoogleReplica/index.php">
    <div class="item test"><img src="http://www.sethjfreeman.com/HomePage/ItemImages/GoogleReplica.png" class="img_1">Google.com Replica</div>
  </a>
  <a href="/ProjectHolder/WebProjects/PhPToMySQLStoringFormInformation/index.php">
    <div class="item">Php Form <br> MySQL Database</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
</div>

选项 2：

function handler(ev) {
  var target = $(ev.target);
  if (target.is(".item")) {
    var brt = target.offset().top;
    var mylet = target.parent().offset().left + target.parent().width();

    $('#DivToShow').css({
      'top': brt,
      'left': mylet,
      'display': 'block',
      'z-index': '10'
    });
  }
}
$(".item").mouseover(handler);

body {
  font: 1em/1.67 'Open Sans', Arial, Sans-serif;
  margin: 0;
  background: #010101;
}

.masonry {
  margin: 10em 10em;
  padding: 0;
  -moz-column-gap: 4.3em;
  -webkit-column-gap: 4.3em;
  column-gap: 4.3em;
  font-size: .85em;
}

.item {
  display: inline-block;
  background: #3D3D3D;
  color: white;
  padding: 1em;
  margin: 0 0 1.5em;
  width: 100%;
  border: 1px solid #737373;
  border-radius: 5px;
  text-align: center;
}

.item:hover {
  -webkit-filter: contrast(.2);
  filter: contrast(.2);
}

@media only screen and (min-width: 400px) {
  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media only screen and (min-width: 700px) {
  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media only screen and (min-width: 900px) {
  .masonry {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media only screen and (min-width: 1100px) {
  .masonry {
    -moz-column-count: 5;
    -webkit-column-count: 5;
    column-count: 5;
  }
}

.item .img_1 {
  display: block;
  height: 130px;
  width: 275px;
  margin: 0 auto;
  padding-bottom: 10px;
}

<script src="http://www.sethjfreeman.com/Resources/jquery-3.1.1.js"></script>
<div id="DivToShow" style="height: 100px; width: 100px; background: green; display: none; position: absolute;"></div>
<div class="masonry">
  <a href="/ProjectHolder/WebProjects/GoogleReplica/index.php">
    <div class="item test"><img src="http://www.sethjfreeman.com/HomePage/ItemImages/GoogleReplica.png" class="img_1">Google.com Replica</div>
  </a>
  <a href="/ProjectHolder/WebProjects/PhPToMySQLStoringFormInformation/index.php">
    <div class="item">Php Form <br> MySQL Database</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
  <a href="">
    <div class="item">...</div>
  </a>
</div>

为什么将 div1 位置设置为 div2 的顶部和左侧偏移 + div2 的宽度不会将其定位到右上角？

Why does setting div1 position to div2's top & left offset + div2's width not position it to the right top corner?

html

javascript

jquery

offset

选项 1：

选项 2：