点评:div悬浮框在某些特殊场合还是比较实用的,下面为大家介绍下使用CSS实现的并且兼容IE6,示例如下,感兴趣的朋友可以练练手
P68HTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> P68HTML5中文学习网 - HTML5先行者学习网
<html xmlns="http://www.w3.org/1999/xhtml"> P68HTML5中文学习网 - HTML5先行者学习网
<head> P68HTML5中文学习网 - HTML5先行者学习网
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> P68HTML5中文学习网 - HTML5先行者学习网
<title>CSS固定定位</title> P68HTML5中文学习网 - HTML5先行者学习网
<style type="text/css"> P68HTML5中文学习网 - HTML5先行者学习网
{ P68HTML5中文学习网 - HTML5先行者学习网
padding:0; P68HTML5中文学习网 - HTML5先行者学习网
margin:0; P68HTML5中文学习网 - HTML5先行者学习网
} P68HTML5中文学习网 - HTML5先行者学习网
#fixedLayer{ P68HTML5中文学习网 - HTML5先行者学习网
width:100px; P68HTML5中文学习网 - HTML5先行者学习网
line-height:50px; P68HTML5中文学习网 - HTML5先行者学习网
background: #FC6; P68HTML5中文学习网 - HTML5先行者学习网
border:1px solid #F90; P68HTML5中文学习网 - HTML5先行者学习网
position:fixed; P68HTML5中文学习网 - HTML5先行者学习网
right:10px; P68HTML5中文学习网 - HTML5先行者学习网
bottom:10px; P68HTML5中文学习网 - HTML5先行者学习网
} P68HTML5中文学习网 - HTML5先行者学习网
</style> P68HTML5中文学习网 - HTML5先行者学习网
<!--[if lte IE 6]> P68HTML5中文学习网 - HTML5先行者学习网
<style type="text/css"> P68HTML5中文学习网 - HTML5先行者学习网
html { P68HTML5中文学习网 - HTML5先行者学习网
height:100%; P68HTML5中文学习网 - HTML5先行者学习网
overflow:hidden; P68HTML5中文学习网 - HTML5先行者学习网
} P68HTML5中文学习网 - HTML5先行者学习网
body { P68HTML5中文学习网 - HTML5先行者学习网
height:100%; P68HTML5中文学习网 - HTML5先行者学习网
overflow:auto; P68HTML5中文学习网 - HTML5先行者学习网
} P68HTML5中文学习网 - HTML5先行者学习网
#fixedLayer { P68HTML5中文学习网 - HTML5先行者学习网
position:absolute; P68HTML5中文学习网 - HTML5先行者学习网
} P68HTML5中文学习网 - HTML5先行者学习网
</style> P68HTML5中文学习网 - HTML5先行者学习网
<![endif]--> P68HTML5中文学习网 - HTML5先行者学习网
</head> P68HTML5中文学习网 - HTML5先行者学习网
<body> P68HTML5中文学习网 - HTML5先行者学习网
<div id="fixedLayer">固定不动</div> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
<p>dd</p> P68HTML5中文学习网 - HTML5先行者学习网
</body> P68HTML5中文学习网 - HTML5先行者学习网
</html> P68HTML5中文学习网 - HTML5先行者学习网