Question

I want a button to be fixed in its position, but the fact is I don’t know the position of button, I mean I created a page where I placed a button (i.e I didn’t fixed its height or width), what I want where ever in the page that button is created, on scrolling its position remains the fixed.

<table width='100%' border='1'>
   <tr><td><input type='submit' value='LogOut'></td></tr>
</table>

Now I don’t know where this submit button will be displayed but I want that it should be in place where it is created.

Now I am using this code for making three buttons as fixed, but their left property is auto making them to overlap each other.

$('#headerHome,#headerAccount,#btnSignOut').button().each(function(){
    alert(''+$(this).css('left'));
  //$(this).css({
  //  'position' : 'fixed',
  //  'top': "'"+ $(this).css('top') +"'",
  //  'left': "'"+ ($(this).css('left')-100) +"'",
  //  'z-index' : '100'
  //});
});

Please shed some light.Thanks in advance.

PS. I am using JQuery

Answer 1

Try this:

$(document).ready(function(){
    $('#yourButtonId').css({
        position: 'fixed',
        top: $('#yourButtonId').position().top,
        left: $('#yourButtonId').position().left
    });
});