title: fixed position of button above image
body: <p>I have a problem with my webpage. I placed a button on top of an image inside a scrollable <code>&lt;div&gt;&lt;/div&gt;</code>, and this <code>&lt;div&gt;&lt;/div&gt;</code> is inside the <code>&lt;td&gt;&lt;/td&gt;</code> of the table. The button on top of image has the following CSS styles:</p>
  
  <pre><code>border:none; 
  background-color:transparent;
  color:#FFF;
  z-index:101;
  top:2px;
  background-image:url(count.png);
  background-size:40px;
  width:40px;
  height:40px;
  padding:0 15px;
  font-size:16px;
  margin-left:-5px;
  cursor:pointer;
  position:absolute;
  </code></pre>
  
  <p>Now the problem is when I scroll down, the button stays on the same position. What I want is when I scroll down the button hides on top together with the image at the same position. How can I make this? Any help would be so much appreciated.</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/bnpKj/" rel="nofollow">jsFiddle</a></p>