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?

144

.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.

Máx.
fonte

Respostas:

227

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).

Campeão
fonte
13
$("#mydiv").css({top: '200px', left: '200px', position:'absolute'});<- bom $("#mydiv").css({top: '200', left: '200', position:'absolute'});<- ruim. Aparentemente, se os valores de posição são cadeias , você deve incluir as unidades ou elas não terão efeito.
Bob Stein
1
Essa nota sobre ter um pai em posição de parente me salvou de muita frustração. Obrigado.
NuclearPeon 15/09/16
39
$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);
MMALSELEK
fonte
7
mais alguma instrução ajudaria aqui
pomba
1
ou $ ("# mydiv"). css ({'top': 200, 'left': 200});
31816 Nick B #
Em outras palavras, o OP estaria correto se eles tivessem simplesmente citado "top" e "left"?
RufusVS 07/04/19
13

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.

xdazz
fonte
10
.position () não tem um setter
devnull69 5/12
Onde exatamente ele diz que pode definir a posição? Eu acho que só pode encontrar os valores, não alterá-los.
Chris
1
O método .position () não define valores!
Max
Muito interessante!!! Seu código é muito útil quando você não pode definir a propriedade css position do elemento pai (como mencionado na resposta principal) porque é um widget de interface do usuário e você não deseja alterar suas configurações para uma atividade tranqüila. Claro que isso só acontece quando você está usando a interface do usuário do jQuery. Encontrei este pequeno problema com o widget "arrastável" da interface do usuário do jQuery.
Max
6

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
Derek Wade
fonte
6

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

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

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.

Knickum
fonte
0

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

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