javascript - 使用 jQuery.css() 的 left 和 top 属性的意外值

Question

我从 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>

我认为每个 console.log() 的输出都是“0px”……我错过了什么？

Answer 1

请务必在图像元素上设置 position 属性。

此属性的默认值为 position: static。如果您使用此样式，则 top 和 left 属性将被忽略，因为具有静态位置的元素无法移出文档流。