Unexpected values for left and top attributes using jQuery.css()

Question

I'm getting unexpected output from jQuery.css()...

<img src="http://placekitten.com/640/360" alt="" id="original_image" style="left:0px; top:0px;" />

<script>
  var original_image = $('#original_image');

  console.log(original_image.css('left')); //outputs 'auto' :(

  original_image.bind('load', function() {
    console.log(original_image.css('left')); //outputs 'auto' :(
  });

  $(function() {
    console.log(original_image.css('left')); //outputs 'auto' :(
  });

  setTimeout("console.log(original_image.css('left'))", 2000); //outputs '0px' :)
</script>

I would think the output in each one of the console.log() would be '0px'... what am I missing?

Do you have a position style set on the image? It may ignore both the top and left attributes if it is not position: fixed, relative, or absolute. — James Hay
– James Hay, Commented Feb 24, 2012 at 1:06
@JamesHay YES, you're right, thanks! Post as an answer so I can give you credit. — tybro0103
– tybro0103, Commented Feb 24, 2012 at 1:15

James Hay · Accepted Answer · 2012-02-24 02:23:14Z

2

Be sure to set a position attribute on your image element.

The default for this attribute is position: static. If you are using this style, the top and left attrbiutes will be ignored as an element with static position can not be moved outside of the document flow.

answered Feb 24, 2012 at 2:23

James Hay

7,3656 gold badges35 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unexpected values for left and top attributes using jQuery.css()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related