Плавающий div на HTML-странице

Question

есть div,

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

Я редактирую некоторое содержимое через JavaScript, например,

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

Также этот div отображается при наведении мыши. Как бы пользователь ни прокручивал страницу, div должен отображаться в представлении внизу. Как это может быть достигнуто.

Редактировать

Также можете ли вы сказать мне, что не так с этим ..

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 не отображается. Это внутри функции и вызывается при наведении мыши на

Answer 1

Если вы можете избежать IE6, тогда вы можете использовать свойство position: fixed.

См. позиция свойство

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

Правка - div, прикрепленный к указателю мыши

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

Рабочая демоверсия