CODEWITHSUNDEEP
javascriptjquerycss
Lai Yu-Hsuan
Lai Yu-Hsuan

Reputation: 28131

Why isn't jquery's .position() the same as css's position?

I have a div of which "position" property is "absolute".

var a = $(div).first();

a.animate({top:20});

a.css("top");
>>"20px"

a.position().top;
>>15.243560791015625

What happened? The .position() gives me the position relative to the first positioned ancestor. Wouldn't it be the same as css's position?

Edit: or maybe I ask another question. How can I call .animate to make a.position().top === 20?

Edit2: found the bug. It's "rotate".

Edit3: for some reason, the ui.position() in jQuery UI plugin's callback works as .css("top"), not .position(). Although they have the same names.

Upvotes: 0

Views: 138

Answers (2)

Lai Yu-Hsuan
Lai Yu-Hsuan

Reputation: 28131

Sorry for wasting your time... I looked around my css style and found the problem.

The problem is caused by "rotate".

When an element is rotated, it's .position() would be changed but css not.

So they are different.

Anyway, thank you all for answers.

Upvotes: 1

silent1mezzo
silent1mezzo

Reputation: 2942

jQuery's position is relative to the offset parent (source). Using jQuery's offset is relative to the document (source) which should produce the same number if you're element has a fixed position

Upvotes: 6

Related Questions