調整瀏覽器屏幕大小正在弄亂我的div偏移量

Question

我目前正在創建一個麻將游戲。 游戲是一樣的完整。 在我決定將游戲放入div（ div id="holder" ）以確保游戲將在瀏覽器窗口中居中之前，一切工作正常。

怎么了？

步驟1：調整瀏覽器窗口的大小，使其與游戲大小匹配（因此左側或右側沒有白色邊框。 注意：在頂部添加更多空間時，該問題也適用，但是在此演示中無法調整這個。

步驟2：單擊： Click to Start ，游戲將開始，然后單擊任何提示按鈕。 您將看到一個nr出現在您剛剛單擊的按鈕上方，它向上移動並消失。 該nr位置正確，應始終顯示在您單擊的提示按鈕上方的中間位置。

第3步：現在調整瀏覽器窗口的大小，在左側和右側分別為游戲（例如）2cm的白色空間。

步驟4：現在單擊另一個提示按鈕。 請注意，正在顯示nr，但不再位於“提示”按鈕的中間和上方，而是向右2cm。

那到底是怎么回事？ 我的猜測是，包含nr的div（ div class="score" ）的偏移量包括其偏移量的空格（或類似的東西）。

這顯然是我不想要的！ 但是我不知道如何解決這個問題...

一些代碼片段：

DIV的CSS：

#holder {
    width: 940px; 
    margin: auto auto;
}
.score {
    display: none;
    pointer-events: none;
    position: absolute;
    font-size: 1em;
    text-align: center;
    color:#FFF;
    z-index: 1;
}

JS部分（使用jQuery）：

var offset = $(this).hide(500).offset();
var penalty = Math.round(score * -0.10);  //calculates a score penalty
score += penalty; //this is the result
$('.sc').text(score); //this is needed elsewhere in the script
$('.score') //start of showing the div and it's animation
      .show()
      .text(penalty)
      .css({
          top: offset.top - $('.score').height() - 90,
          left: offset.left,
          width:'3.5em'
      })
      .stop()
      .delay(100)  
      .animate({top: offset.top - $('.score').height() - 140},700)
      .hide(0); 
 ...some more code here, not relevant to this

如果需要更多代碼，請告訴我，但是我認為這已經足夠。 希望這個問題能解決！

親切的問候

Answer 1

在您的持有人CSS中添加position：relative;

#holder {
    width: 940px; 
    margin: auto auto;
    position: relative;
}

看看是否能解決問題。

Answer 2

何時計算偏移量？ 單擊提示時應將其存儲。

如果您將皮件偏移到偏移位置會發生什么情況？

var offset = $（this）.offset（）。hide（500）;

Answer 3

我想我已經找到了。 在我的CSS中，我還有另一個div：

#s0 {
    position: relative;
    float: left; 
    height: 570px;
    width: 760px;
    background: #222 url('images/bg.png');
}

去除： position: relative; 似乎解決了。 會做更多的測試。 謝謝您的建議！