Facebook like button not going back side on the fixed div
        Posted  
        
            by 
                Lahiru Chathuranga
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Lahiru Chathuranga
        
        
        
        Published on 2012-09-15T18:43:34Z
        Indexed on 
            2012/09/16
            3:38 UTC
        
        
        Read the original article
        Hit count: 350
        
I added a Facebook like button to my website.My website has a fixed div on top of the page(blue color div in the image). The like button is below that(in a div which can scroll) My problem is when the page is scroll down the like button comes on top of the fixed div(blue color).I want to scroll it from the backside of the div.How can I do that? There are couple of screenshots I added
Before Scroll

After Scroll

Here is my code of the fixed div
  <script type="text/javascript">
function got_to_signup(){
    window.location.href = "view/policy";
    }
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=368003049941951";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div style="width:100%;background-color:#0094d6;"  >
    <div id="dd" style="background-color:#0094d6; width:100%; height:75px;position:fixed;  " class="center "><div id="a" style="width:1010px; height:75px; background-color:#000000;background:url(xx.png); background-repeat:no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#003; " class="inner div_border">
      <table width="1010" border="0" >
        <tr >
          <td width="15%" rowspan="2"><a href="" style="cursor:pointer; cursor:hand;"><div style="width:200px; height:50px;background-color:none;"></div></a></td>
          <td width="22%" height="14"> </td>
          <td width="5%"> </td>
          <td width="5%"> </td>
          <td width="28%"> </td>
          <td width="2%"> </td>
          <td width="23%"> </td>
        </tr>
        <tr>
          <td colspan="4">
                </td>
          <td colspan="2"><span style="float: right; " ><div style="background-color:#006d9e;border-radius:3px; width:250px; height:34px; display: table;
    vertical-align: middle; color:#FFF; ">
            <table width="100%" border="0" >
              <tr >
                <td width="43%" style="text-align:center"> Start to bump !</td>
                <td width="29%"><div id='basic-modal'><span style="float: right; " ><input name="login_btn" type="button" class="login_button basic" id="login_btn" value="Sign in" /></span></div></td>
                <td width="28%"><span style="float: right; " ><form id="form_reg" method="post"><input name="register_btn" type="button" class="register_button" id="register_btn" value="Sign up" onclick="got_to_signup()"/></form></span></td>
                </tr>
              </table>
          </div></span></td>
          </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td style="color:#FFF; font:Arial, Helvetica, sans-serif; font-size:9px; text-align:right;">    Beta Version   </td>
          </tr>
      </table>
    </div></div></div>
here is my facebook like button code
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=368003049941951";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
              <td height="21" colspan="2"> <table width="187" style="margin-left:3px;font-size:1px;background-image:url(share_back.png);background-repeat:no-repeat;border-radius:3px;" >
          <!--tweeter button-->
          <tr><td width="71"><a href="https://twitter.com/bump_lk" class="twitter-follow-button" data-show-count="false" style="float:right;">Follow @bump_lk</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></td>
    <!--facebook like button-->
          <td width="48"><div class="fb-like" data-href="https://www.facebook.com/Bump.lk" data-send="false" data-layout="button_count" data-width="10" data-show-faces="false" style="position:relative;"></div>
          </td></tr></table></td>
          <td> </td>
          <td> </td>
          <td >
        © Stack Overflow or respective owner