Jquery UI позиция плагин не работает с маржинальной собственности

Question

Я пытаюсь расположить окно в правом верхнем углу экрана моего браузера с помощью JQuery позиции UI плагин как,

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

Это работает должным образом и становится отображается в правом верхнем углу. Но я хотел бы дать некоторое пространство между коробкой и правым краем экрана. Итак, я добавил margin-right положение в контейнер. Сразу же коробка переместилась из верхнего правого угла в левый угол.

Код плунжера: here.

Почему свойство margin влияет на абсолютные координаты контейнера?

Answer 1

Настройка поля для контейнера приведет к Jquery-щ ошибочно вычислить положение элемента, однако у вас есть возможность сделать это с помощью самой функции положения:

at : 'right-10px top' 

Кроме того, для того, чтобы убедиться, что jquery будет располагать элемент в нужном месте, содержимое должно находиться внутри элемента перед позиционированием.

В этом примере у вас есть 2 кнопки. Первая кнопка будет располагать поле в правом углу, а вторая кнопка будет позиционировать поле в правом углу - 10 пикселей.

$('.myButton1').click(function(){ 
 
\t console.log('adding new element into the div container') 
 
\t $('.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({ 
 
\t my : 'right top', 
 
\t at : 'right top', 
 
\t of : 'body' 
 
}); 
 
}); 
 
$('.myButton2').click(function(){ 
 
\t console.log('adding new element into the div container') 
 
\t $('.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({ 
 
\t my : 'right top', 
 
\t at : 'right-10px top', 
 
\t 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>