How do I make a div stick to another element

I am making a voting system. When user click on a link with class "vote" a voting box appears just belov the clicked link. It looks like this at the moment:

My problem is that if the page is scrolled then the vote box is not positioned correctly. I want it to always appear just below the link and to stick to the link even when page is scrolled.

My container is styled like this:

#vote_container {
    position: fixed;
    height: 82px;
    min-height: 83px;
    background-c开发者_开发问答olor: #e7edf3;
    border: 3px solid #d3d6d8;
    border-radius: 10px;
    left: 40%;
    margin-top: 6px;    
    padding: 10px;    
    text-align: left;
    top: 60%;
    z-index: 199;    
}

And this is the code I use to position the container:

var pos = $(this).offset();
var width = $(this).width();        
$("#vote_container").css({ "left": (pos.left - 16) + "px", "top": (pos.top + 28) + "px" });

Ive even created a simplified example at jsFiddle.

---

Does changing the #vote_container position to absolute resolve your issue? http://jsfiddle.net/xkNqG/9/

EDIT: Also, in the css I added display:none and in the function added $('#vote_container').show()

---

The #vote_container should not be 'position: fixed' as ngen says it should instead be 'position: absolute' here is my fiddle I simplified your css (for temporary purposes) just to help get to the root of the problem and added more text so that the fiddle would actually demonstrate the scroll problem.

---

If you want a pure css solution try this.

css

.tipLink{
  color:#33f;
  cursor:pointer;
  position:relative;
}
.tip{
  position:absolute;
  display:none;
  top:80%;
  left:110%;
  background-color:#dddddd;
  border:1px solid black;
  width:100px;
  color:black;
  z-index:20;
  padding:3px;
  -webkit-border-radius:5px 5px 5px 5px;
  -moz-border-radius:5px 5px 5px 5px;
  border-radius:5px 5px 5px 5px;
  text-align:center;
}
.tipLink:hover .tip{
  display:block;
}

HTML

<span class="tipLink">
  Mouse Over Me
  <span class="tip">Hello World</span>
</span>

You will have to style the inner span tag to the design you need, but this should work.

---

Why don't you use the jQuery tooltip plugin, http://bassistance.de/jquery-plugins/jquery-plugin-tooltip, and enhance it by styling it the way you want. It already handles positioning and can have text or markup in it.