为什么将 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>

说明：
当我使用类（项目）left＆top + width计算div的偏移量时，它不会将具有id（DivToShow）的div定位在右上角。它很接近，但不准确。为什么会这样，我该如何解决？

Answer 1

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

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

第三个宽度使用 <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>