No jQuery, como posso definir as propriedades "superior, esquerda" de um elemento com valores de posição relativos ao pai e não ao documento?

.offset([coordinates])O método define as coordenadas de um elemento, mas apenas em relação ao documento. Então, como posso definir coordenadas de um elemento, mas em relação ao pai?

Descobri que o .position()método obtém apenas valores "superiores, esquerdos" em relação ao pai, mas não define nenhum valor.

Eu tentei com

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

mas não funciona.

Para definir a posição em relação ao pai, é necessário definir o position:relativepai e position:absoluteo elemento

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

Isso funciona porque as position: absolute;posições são relativamente ao pai mais próximo posicionado (ou seja, o pai mais próximo com qualquer propriedade de posição que não seja a padrão static).

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

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

Você pode tentar o método .position da interface do usuário do jQuery .

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

Verifique a demonstração de trabalho.

Descobri que se o valor passado é um tipo de string, ele deve ser seguido por 'px' (ou seja, 90 px), onde se o valor for um número inteiro, ele acrescentará o px automaticamente. as propriedades de largura e altura são mais tolerantes (qualquer um dos tipos funciona).

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

Dinâmico de deslocamento de código para página dinâmica

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

Atualizando minha memória ao definir a posição, estou chegando tão tarde que não sei se mais alguém a verá, mas -

Eu não gosto de definir a posição usando css(), embora muitas vezes seja bom. Acho que a melhor aposta é usar o position()setter da jQuery UI, conforme observado pelo xdazz. No entanto, se a interface do usuário do jQuery não for, por algum motivo, uma opção (mas o jQuery for), prefiro o seguinte:

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

Isso tem a vantagem de não definir arbitrariamente $divo pai de um posicionamento relativo (e se $divo pai fosse, ele próprio, absoluto posicionado dentro de outra coisa?). Eu acho que o único grande caso extremo é se $divnão tem offsetParent, não tenho certeza se ele iria voltar document, nullou algo completamente diferente.

offsetParent está disponível desde o jQuery 1.2.6, em 2008, então essa técnica funciona agora e quando a pergunta original foi feita.

Use a offset()função de jQuery. Aqui seria:

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