W jQuery, jak ustawić właściwości „góra, lewo” elementu z wartościami pozycji względem elementu nadrzędnego, a nie dokumentu?

144

.offset([coordinates])metoda ustawia współrzędne elementu, ale tylko w odniesieniu do dokumentu. W takim razie jak mogę ustawić współrzędne elementu, ale w stosunku do rodzica?

Zauważyłem, że .position()metoda pobiera tylko wartości „góra, lewo” względem rodzica, ale nie ustawia żadnych wartości.

Próbowałem z

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

ale nie działa.

— Maks
źródło

227

Aby ustawić pozycję względem rodzica, musisz ustawić position:relativerodzica i position:absoluteelementu

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

To działa, ponieważ position: absolute;pozycjach w stosunku do najbliższego umieszczony rodzica (czyli najbliżej rodzic z jakiegokolwiek majątku pozycji innej niż domyślna static).

— Mistrz
źródło

13

$("#mydiv").css({top: '200px', left: '200px', position:'absolute'});<- dobrze $("#mydiv").css({top: '200', left: '200', position:'absolute'});<- źle. Wygląda na to, że jeśli wartości pozycji są łańcuchami , musisz uwzględnić jednostki, inaczej nie będzie to miało wpływu.

— Bob Stein

1

Ta notatka o posiadaniu rodzica w odpowiedniej pozycji uratowała mi wiele frustracji. Dziękuję Ci.

— NuclearPeon

39

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

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

— MMALSELEK
źródło

7

przydałoby się więcej instrukcji

— zanurkował

1

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

— Nick B

Innymi słowy, PO byłby poprawny, gdyby po prostu zacytował „na górze” i „na lewo”?

— RufusVS

13

Możesz wypróbować metodę .position z jQuery UI .

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

Sprawdź działające demo.

— xdazz
źródło

10

.position () nie ma setera

— devnull69

Gdzie dokładnie jest napisane, że może ustawić pozycję? Myślę, że może tylko znaleźć wartości, a nie je zmienić.

— Chris,

1

.position () nie ustawia wartości!

— Maksymalnie

Bardzo interesujące!!! Twój kod jest bardzo przydatny, gdy nie możesz ustawić właściwości pozycji css elementu nadrzędnego (jak wspomniano w głównej odpowiedzi), ponieważ jest to widżet interfejsu użytkownika i nie chcesz zmieniać jego ustawień, aby zapewnić płynną aktywność. Oczywiście dzieje się tak tylko wtedy, gdy używasz interfejsu użytkownika jQuery. Znalazłem ten mały problem z widżetem „draggable” interfejsu użytkownika jQuery.

— Max

6

Zauważyłem, że jeśli przekazana wartość jest ciągiem znaków, musi następować po niej „px” (tj. 90px), gdzie jeśli wartość jest liczbą całkowitą, piksel zostanie dodany automatycznie. właściwości szerokości i wysokości są bardziej wyrozumiałe (oba typy działają).

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
źródło

6

Dynamiczne przesunięcie kodu dla strony dynamicznej

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

— behzad
źródło

0

Odświeżam pamięć o ustawianiu pozycji, dochodzę do tego tak późno, że nie wiem, czy ktoś inny to zobaczy, ale -

Nie lubię ustawiać pozycji za pomocą css(), choć często jest to w porządku. Myślę, że najlepszym rozwiązaniem jest użycie position()setera jQuery UI, jak zauważył xdazz. Jeśli jednak interfejs użytkownika jQuery z jakiegoś powodu nie jest opcją (a jQuery jest), wolę to:

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

Ma to tę zaletę, że nie można arbitralnie ustawiać $divrodzica na względne pozycjonowanie (co by było, gdyby $divrodzic sam w sobie był bezwzględnie umieszczony wewnątrz czegoś innego?) Myślę, że jedynym ważnym przypadek krawędź jest, jeśli $divnie ma offsetParent, nie wiem, czy byłoby powrócić document, nullalbo coś zupełnie innego.

offsetParent była dostępna od wersji jQuery 1.2.6, gdzieś w 2008 roku, więc ta technika działa teraz i wtedy, gdy zadano pierwotne pytanie.

— knickum
źródło

0

Użyj offset()funkcji jQuery. Oto byłoby:

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

— Sreekanth S
źródło