Question

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

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

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

Plunker代码为here。

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

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>

Jquery UI位置插件不能使用margin属性

1 个答案: