position/offset of div returning as 0

Question

Here is my css for my circle

#balloon-circle {
    width: 150px;
    height: 150px;
    background: rgb(255,100,100);
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    border-radius: 150px;
    top:5px;
}

And here is the javascript:

var bc = document.getElementById("balloon-circle");
var bctop = bc.offsetTop;
console.log(bctop);

I've also tried:

var bc = $("#balloon-circle");
var position = bc.position();
console.log(position.top);

However, they both return 0 for the top position value.

Why is this?

Answer 1

You need to set your position to "relative" or "absolute" before you can use top.

http://www.w3schools.com/css/css_positioning.asp

#balloon-circle {
    width: 150px;
    height: 150px;
    background: rgb(255,100,100);
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    border-radius: 150px;
    position: relative;
    top:5px;
}