Floating div in html page

Question

there is a div,

<div id='show' style='display:none;'></div>

I edit some contents to through javascript like,

 document.getElementById('show').innerHTML = el.innerHTML;
 document.getElementById('show').title = el.innerHTML;

Also this div is shown at a mouse over. How ever the user scrolls the page the div should appear in the the view at the bottom.How can this be achieved.

Edit

Also can u tell me whats wrong with this..

var ele=document.getElementById('show'); 
document.getElementById('show').innerHTML = el.innerHTML; 
ele.width='200px'; 
ele.height='30px';  
ele.bgcolor='#a9a9a9'; 
ele.color='#fff'; 
ele.position='absolute'; 
ele.display='block'; 

$(window).mouseover(function(event) { 
    $("#show").css({'top': event.pageY, 'left': event.pageX}); 
    $('#show').height(); 
});

The div doesnt show up.This is inside a function and is invoked on mouse over

Answer 1

If you can avoid IE6 then you can use the position: fixed property.

See position property

<div style="position: fixed; bottom: 0px;">
    I am at the bottom of the page
</div>

Edit- div attached to the mouse pointer

<style type="text/css">
#div1 { width: 200px; height: 30px; background-color: #a9a9a9; color: #fff; position: absolute; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $(window).mousemove(function(event){
        $("#div1").css({'top': event.pageY, 'left': event.pageX});  
    });
});
</script>
<div id="div1">move me</div>

Working Demo