html页面中的浮动div

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 属性。

查看position 属性

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

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

Working Demo