为什么 jQuery 小部件的绝对定位是错误的？答案

【问题标题】：Why is absolute positioning of a jQuery widget wrong?为什么 jQuery 小部件的绝对定位是错误的？
【发布时间】：2020-05-24 09:08:12
【问题描述】：

我已经准备好a complete example 演示我的问题：

我的上下文是：在一个 2 列的表格中，我想在左侧显示玩家列表，在右侧显示包含 2 位玩家的游戏。

为了显示一个播放器，我准备了一个基于 div 和 CSS position: relative; 的 jQuery UI 小部件，它在左侧的播放器列表中运行良好。

但是在右侧，我尝试使用 CSS position: absolute; 两次使用相同的小部件，并且由于某些原因，“Ms. Left”和“Mr. Right”的位置好像它们的父级是 body而不是#gameTd。

请问为什么会发生这种情况以及如何将 2 个 div 相对于 #gameTd 定位？

HTML：

<table border="1" width="100%">
  <tr>
    <th>Lobby</th>
    <th>Game</th>
  </tr>
  <tr>
    <td id="lobbyTd"></td>
    <td id="gameTd">
      <div id="leftPlayer"></div>
      <div id="rightPlayer"></div>
    </td>
  </tr>
</table>

CSS：

#lobbyTd {
  width: 25%;
  overflow-y: scroll;
}

#gameTd {
  background: #6C6;
}

.my-player {
  position: relative;
  background: #FFF no-repeat center;
  background-size: contain;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
  margin: 8px;
  width: 160px;
  height: 120px;
}

.my-player-name {
  position: absolute;
  font-size: 18px;
  background: #FFF;
  color: #000;
  left: 0;
  bottom: 0;
  padding: 2px;
  width: 154px;
  height: 20px;
}

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 css jquery-ui css-position jquery-ui-widget

【解决方案1】：

您需要为#gameTd 添加position: relative 以相对于该块进行定位。

【讨论】：

是的，这有帮助，但我不太明白为什么，请您详细说明一下？
@AlexanderFarber 是的，当然，这是绝对定位的一个特性。简而言之，为父级设置position: relative 可以根据父级的坐标定位其中的块。

【解决方案2】：

您应该将position : relative 添加到父<td>（包含#gameTd），方法是为它分配您对其中所有绝对定位元素的权限，使其位于其（父）块内。

将代码中的行更改为

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

【讨论】：