Jquery UI 位置插件不适用于 margin 属性

Question

我正在尝试使用 jquery ui 位置插件在浏览器的右上角屏幕上放置一个框，

$('.container').position({
    my : 'right top',
    at : 'right top',
    of : 'body'
}); 

这可以正常工作并显示在右上角。但我喜欢在盒子和右侧屏幕边缘之间留出一些空间。所以，我在容器中添加了 margin-right 位置。随即，盒子从右上角移到了左上角。

Plunker 代码是 here .

为什么margin属性会影响容器的绝对坐标？

Answer 1

为容器设置边距会导致 jquery-ui 错误地计算元素的位置，但是您可以使用位置函数本身来做到这一点:

at : 'right-10px top'

除此之外，为了确保 jquery 将元素定位在正确的位置，在定位之前内容应该在元素内部。

在此示例中，您有 2 个按钮。第一个按钮将在右上角放置一个框，而第二个按钮将在右上角放置一个框 - 10px。

$('.myButton1').click(function(){
	console.log('adding new element into the div container')
	$('.container1').append('<div class="noti-msg">this is a long small notification message... this width will fall down to the next level</div>');
  $('.container1').position({
	my : 'right top',
	at : 'right top',
	of : 'body'
}); 
});
$('.myButton2').click(function(){
	console.log('adding new element into the div container')
	$('.container2').append('<div class="noti-msg">this is a long small notification message... this width will fall down to the next level</div>');
  $('.container2').position({
	my : 'right top',
	at : 'right-10px top',
	of : 'body'
}); 
});

.container1, .container2 {
  width: 300px;
  background-color: #c3c3c3;
  justify-content: center;
  text-align: center;
  opacity: 0.9;
}
.container2 {
  background: red;
}
.noti-msg{
  padding: 5px;
  box-sizing: border-box;
  width: 250px;
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css' />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/external/jquery/jquery.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js'></script>
<button class="myButton1">my button 1...</button>
<button class="myButton2">my button 2...</button>
<br/>
<div class="container1">
</div>
<div class="container2">
</div>