В jQuery как я могу установить свойства "сверху, слева" элемента с позиционными значениями относительно родительского, а не документа?

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

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

Я пробовал с помощью

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

но не работает.

Ответы

Ответ 1

Чтобы установить положение относительно родителя, вам нужно установить position:relative родителя и position:absolute элемента

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

Это работает, потому что position: absolute; располагается относительно ближайшего позиционированного родителя (т.е. ближайшего родителя с любым свойством position, отличным от значения по умолчанию static).

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

Я обнаружил, что если переданное значение является строковым типом, оно должно сопровождаться "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

Ответ 5

Динамическое смещение кода для динамической страницы

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

Ответ 6

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

Мне не нравится устанавливать позицию с помощью 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 parent в относительное положение (что, если $div parent сам по себе абсолютно позиционирован внутри чего-то еще?). Я думаю, что единственный главный крайний случай, если $div не имеет никакого offsetParent, не уверен, если он будет возвращать document, null, или что - то совсем другое.

offsetParent был доступен с jQuery 1.2.6, где-то в 2008 году, поэтому этот метод работает сейчас и когда был задан оригинальный вопрос.

Ответ 7

Используйте функцию offset() jQuery. Вот это было бы:

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