為什么將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的偏移量時，它不會在右上角定位帶有id（DivToShow）的div。 它接近但不准確。 為什么會這樣，我該如何解決？

Answer 1

1。 因為你有var target = $(ev.target); 你可以使用target你不需要$(target) 。

2nd target.offset().top - $('#DivToShow').height(); 您需要刪除顯示項目的高度，以便它顯示在您懸停的項目上方

第3個寬度使用<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>