为什么jQuery小部件的绝对位置是错误的？

我已准备好演示我的问题：

我的上下文是：在一个两列的表格中，我想在左边显示一个玩家列表，在右边显示一个有两个玩家的游戏

为了显示一个播放器，我准备了一个基于

div

和CSS

position:relative的jqueryui小部件并且它在左侧的玩家列表中运行良好

然而，在右边，我尝试使用同一个小部件两次CSS
position:absolute身体
，而不是
#gameTd

为什么会发生这种情况，请告诉我如何将2个div相对于
#gameTd

HTML:

Javascript:

jQuery(document).ready(function($) {
  var PHOTO_PATTERN = /^https?:\/\/\S+/i;

  $.widget('my.player', {
    // default options
    options: {
      name: '',
      photo: 'https://slova.de/raspasy/images/male_happy.png',
    },

    _create: function() {
      this._hoverable(this.element);

      this.element.addClass('my-player');

      this.nameDiv = $('<div/>', {
        'class': 'my-player-name'
      }).appendTo(this.element);

      this._refresh();
    },

    _destroy: function() {
      this.nameDiv.remove();
      this.element.removeClass('my-player');
    },

    _setOptions: function() {
      this._superApply(arguments);
      this._refresh();
    },

    _refresh: function() {
      var photo = (PHOTO_PATTERN.test(this.options.photo) ? this.options.photo : 'https://slova.de/raspasy/images/male_happy.png');
      this.element.css('background-image', 'url("' + photo + '")');
      this.nameDiv.text(this.options.name);
    }
  });


  var lobbyPlayer1 = $('<div/>').player({
    name: 'Player #1'
  }).appendTo($('#lobbyTd'));

  var lobbyPlayer1 = $('<div/>').player({
    name: 'Player #2',
    photo: 'https://slova.de/raspasy/images/female_sad.png'
  }).appendTo($('#lobbyTd'));

  var lobbyPlayer3 = $('<div/>').player({
    name: 'Alexander',
    photo: 'http://afarber.de/images/farber.jpg'
  }).appendTo($('#lobbyTd'));

  // Why is absolute positioning wrong below?
  var leftPlayer = $('#leftPlayer').player({
    name: 'Ms. Left',
    photo: 'https://slova.de/raspasy/images/female_happy.png'
  }).css({
    position: 'absolute',
    left: '30px',
    top: '20px'
  });
  var rightPlayer = $('#rightPlayer').player({
    name: 'Mr. Right',
    photo: 'https://slova.de/raspasy/images/male_sad.png'
  }).css({
    position: 'absolute',
    right: '30px',
    top: '20px'
  });
});

jQuery（文档）.ready（函数（$）{
var PHOTO_PATTERN=/^https？：\/\/\S+/i；
$.widget（'my.player'{
//默认选项
选项：{
名称：“”，
照片:'https://slova.de/raspasy/images/male_happy.png',
},
_创建：函数（）{
this.\u可悬停（this.element）；
this.element.addClass（'my-player'）；
this.nameDiv=$（“”{
'class'：'my player name'
}).appendTo（此元素）；
这个；
},
_销毁：函数（）{
this.nameDiv.remove（）；
this.element.removeClass（'my-player'）；
},
_setOptions:function（）{
这是超级应用（参数）；
这个；
},
_刷新：函数（）{
var photo=（photo_PATTERN.test（this.options.photo）？this.options.photo:'https://slova.de/raspasy/images/male_happy.png');
css（'background-image'，'url（'+photo+'）；
this.nameDiv.text（this.options.name）；
}
});
变量lobbyPlayer1=$（''）.player({
姓名：“玩家#1”
}).appendTo（$）；
变量lobbyPlayer1=$（''）.player({
姓名：“玩家#2”，
照片:'https://slova.de/raspasy/images/female_sad.png'
}).appendTo（$）；
变量lobbyPlayer3=$（''）.player({
姓名：'亚历山大'，
照片:'http://afarber.de/images/farber.jpg'
}).appendTo（$）；
//为什么下面的绝对定位是错误的？
var leftPlayer=$（“#leftPlayer”）.player({
姓名：'左女士'，
照片:'https://slova.de/raspasy/images/female_happy.png'
}).css({
位置：'绝对'，
左：“30px”，
顶部：“20px”
});
var rightPlayer=$（“#rightPlayer”）.player({
姓名：'右先生'，
照片:'https://slova.de/raspasy/images/male_sad.png'
}).css({
位置：'绝对'，
右：'30px'，
顶部：“20px”
});
});
您需要为
#gameTd
添加
位置：相对
以相对于此块进行定位。
您需要为
#gameTd
添加
位置：相对
以相对于此块进行定位。
您应该将
位置：相对
添加到父
（其中包含
#gameTd
）通过分配它，您可以授予其中所有绝对定位元素在其（父）块中的权限

将代码中的行更改为

 <td id="gameTd" style="position:relative">

您应该将
位置：相对
添加到父
（包含
#gameTd
）中，通过将其分配给它，您可以授予它（父）块中的所有绝对定位元素的权限

将代码中的行更改为

 <td id="gameTd" style="position:relative">


是的，这很有帮助，但我不太明白为什么，你能详细说明一下吗？@AlexanderFarber是的，当然，这是绝对定位的一个功能。简言之，为父对象设置
位置：相对
，可以根据父对象的坐标定位其中的块。是的，这很有帮助，但我不太清楚明白为什么吗？请详细说明一下？@AlexanderFarber是的，当然，这是绝对定位的一个功能。简言之，为父对象设置
位置：relative
，可以根据父对象的坐标定位其中的块。
 <td id="gameTd" style="position:relative">