div {position: absolute} визуализируется в разных местах на экранах различной ширины

Question

Я сделал скользящее (S) окно с функцией jQuery animate().то есть скользит влево и вправо.

$.animate({width:'toggle', opacity:'toggle'},2000,'swing',function(){
    // ...
})

Он использует следующий CSS при открытии.

position:absolute;
height: 496px;
width: 694px;
left:36px;
top:124px;

Проблема, с которой я сталкиваюсь, заключается в следующем: на экранах различной ширины окно запускается в разных местах.Я должен показать его рядом с другим окном (A).На моем ноутбуке работает нормально.На стороне клиента это перекрывает половину окна A. Я полагаю, что это связано с position:absolute;, но я не знаю, как решить это.Пожалуйста помоги!Спасибо!

Answer 1

Разные размеры экранов имеют разные разрешения.Итак, на вашем компьютере 100px может быть центром вашего экрана, но на чужом это может и не быть.Использование% вместо px может работать лучше для вас.

Answer 2

вы можете использовать $("body").height();, а также $("body").scrollTop(), чтобы получить высоту окна клиента и положение страницы для просмотра, в вашем коде у вас есть высота слайдов. уменьшите высоту своего слайда от них. Теперь вы можете показать свой слайд в центре страницы. как это:

var top = $("body").scrollTop() + ((parseInt($("body").height()) - slideHeight) / 2);

Answer 3

Спасибо большое за ответы, ребята!Очень признателен.

@ Ответ ali-youhannaei дал мне идею использовать следующий код:

var pos = jQuery("#div_a").offset(); // Window A's position
var x = pos.left + jQuery("#div_a").width(); // Window S's position

Установить left:x; с postion:absolute; для окна S. Это будет работать.

Answer 4

Если этот div, к которому применяется анимация или свойство position: absolute, имеет родительский div, тогда apply position: относительный.

<div class="wrapper">
  <div class="slider"></div>
</div>

css:
.wrapper{ position:relative;}
.slider{
position:absolute;
height: 496px;
width: 694px;
left:36px;
top:124px;
}

Answer 5

Вы можете попробовать

float:right; 

, чтобы поместить этот объект прямо вдоль вашего окна.Вам нужно будет опубликовать здесь весь код, чтобы я мог указать расположение тега деления.В противном случае вы можете искать поплавок в W3Schools