Floating div in html page

Question

there is a div

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

I am editing some content through javascript like

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

This div is also displayed with the mouse. As soon as the user scrolls the page, the div should appear in the view below. How can this be achieved.

Edit

You can also say what happened to 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(); 
});

Div is not displayed. It is inside a function and called over the mouse over

Answer 1

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

See item 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