В jQuery, как я могу установить «top, left» свойства элемента со значениями позиции относительно родителя, а не документа?

144

.offset([coordinates])Метод устанавливает координаты элемента, но только относительно документа. Тогда как я могу установить координаты элемента, но относительно родителя?

Я обнаружил, что .position()метод получает только «top, left» значения относительно родителя, но он не устанавливает никаких значений.

Я пробовал с

$("#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);

— MMALSELEK
источник

7

здесь может помочь еще одна инструкция

— голубь

1

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

— Ник Б

Другими словами, ОП был бы верным, если бы они просто указали «top» и «left»?

— RufusVS

13

Вы можете попробовать метод .position в jQuery UI .

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

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

— xdazz
источник

10

У .position () нет установщика

— devnull69

Где именно это говорит, что он может установить позицию? Я думаю, что он может только найти значения, а не изменить их.

— Крис

1

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

— Макс

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

— Макс

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});

— Behzad
источник

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
источник