Як у jQuery можна встановити властивості елемента "верхній, лівий" елемента зі значеннями позиції щодо батьківського, а не документа?

144

.offset([coordinates])метод встановлює координати елемента, але лише відносно документа. Тоді як я можу встановити координати елемента, але відносно батьківського?

Я виявив, що .position()метод отримує лише значення "верхній, лівий" щодо батьківського, але він не встановлює жодних значень.

Я спробував

$("#mydiv").css({top: 200, left: 200});

але не працює.

— Макс
джерело

227

Щоб встановити положення відносно батьківського, потрібно встановити position:relativeбатьківський position:absoluteелемент та елемент

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: 200, left: 200, position:'absolute'});

Це працює, тому що position: absolute;позиції відносно найближчого батьківського розташування (тобто, найближчого батьківського з будь-яким властивістю позиції, крім за замовчуванням static).

— Чемпіон
джерело

13

$("#mydiv").css({top: '200px', left: '200px', position:'absolute'});<- хороший $("#mydiv").css({top: '200', left: '200', position:'absolute'});<- поганий. Мабуть, якщо значення позицій є рядками , ви повинні включити одиниці, інакше це не матиме ефекту.

— Боб Штейн

1

Ця записка про те, що мати родича на родині, врятувала мене в багатьох розчарування. Дякую.

— NuclearPeon

39

$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);

— ММАЛСЕЛЕК
джерело

7

ще кілька інструкцій допоможуть тут

— голуб

1

або $ ("# mydiv"). css ({'верх': 200, 'зліва': 200});

— Нік Б

Іншими словами, ОП була б правильною, якби вони просто цитували "вгору" і "вліво"?

— RufusVS

13

Ви можете спробувати .position метод інтерфейсу jQuery .

$("#mydiv").position({
  of: $('#mydiv').parent(),
  my: 'left+200 top+200',
  at: 'left top'
});

Перевірте робочу демонстрацію.

— xdazz
джерело

10

.position () не має сетера

— devnull69

Де саме написано, що він може встановити позицію? Я думаю, що він може знайти лише значення, а не змінити їх.

— Кріс

1

Метод .position () не встановлює значення!

— Макс

Дуже цікаво!!! Ваш код дуже корисний, коли ви не в змозі встановити властивість css позиції батьківського елемента (як зазначено в головній відповіді), оскільки це віджет інтерфейсу, і ви не хочете змінювати його налаштування для плавної діяльності. Звичайно, це відбувається лише тоді, коли ви використовуєте інтерфейс jQuery. Я знайшов цю маленьку проблему з віджетом «перетягування» інтерфейсу jQuery UI.

— Макс

6

Я виявив, що якщо передане значення є рядковим типом, воно повинно супроводжуватися 'px' (тобто 90px), де, якщо значення є цілим числом, воно додасть px автоматично. властивості ширини та висоти більш прощаючі (роботи будь-якого типу).

var x = "90";
var y = "120"
$(selector).css( { left: x, top: y } )        //doesn't work
$(selector).css( { left: x + "px", top: y + "px" } )        //does work

x = 90;
y = 120;
$(selector).css( { left: x, top: y } )        //does work

— Дерек Вейд
джерело

6

Динамічне зміщення коду для динамічної сторінки

var pos=$('#send').offset().top;
$('#loading').offset({ top : pos-220});

— бехзад
джерело

0

Освіжаючи мою пам'ять про встановлення положення, я приходжу до цього так пізно, що не знаю, чи хтось ще побачить це, але -

Мені не подобається налаштування положення css(), хоча часто це добре. Я думаю, що найкращим варіантом є використання position()сеттера jQuery UI, як зазначає xdazz. Однак якщо інтерфейс jQuery чомусь не є варіантом (все ж jQuery є), я віддаю перевагу цьому:

const leftOffset = 200;
const topOffset = 200;
let $div = $("#mydiv");
let baseOffset = $div.offsetParent().offset();
$div.offset({
  left: baseOffset.left + leftOffset,
  top: baseOffset.top + topOffset
});

Це має перевагу в $divтому, що батьків не довільно встановлювати на відносне позиціонування (що робити, якщо $divсам батько був абсолютним в чомусь іншому?) Я думаю , що єдиний головний крайній випадок, якщо $divне має якогось - або offsetParent, не впевнений , що якщо він повернеться document, nullабо що - то зовсім інше.

offsetParent доступний з jQuery 1.2.6, колись у 2008 році, тому ця методика працює і зараз, і коли було задано оригінальне питання.

— knickum
джерело

0

Використовувати offset()функцію jQuery. Ось це було б:

$container.offset({
        'left': 100,
        'top': mouse.y - ( event_state.mouse_y - event_state.container_top ) 
    });

— Sreekanth S
джерело