我已经准备好a complete example来演示我的问题:
我的上下文是:在一个2列的表格中,我想在左侧显示一个玩家列表,在右侧显示一个具有2个玩家的游戏。
[为了显示一个播放器,我已经基于带有CSS div
的position: relative;
准备了一个jQuery UI小部件,它在左侧的播放器列表中很好地工作。
但是在右侧,我试图将相同的小部件与CSS position: absolute;
一起使用两次,由于某些原因,“左女士”和“右先生”的位置就好像其父级是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'
});
});
我准备了一个完整的示例来说明我的问题:我的上下文是:在一个2列的表格中,我想在左边显示一个玩家列表,在右边显示一个包含2个玩家的游戏。显示...
您需要为position: relative
添加#gameTd
以相对于该块定位。
您应该通过为其分配position : relative
到父级<td>
(其中包含#gameTd
),您要对其[父级]块中的所有绝对定位元素都授予权限。