对于div右下角浮动框这个问题,刚开始我把position的位置设置成了absolute。导致后面我一直想把box定位在浏览器右下角一直不成功。当时考虑的是通过doucument,documentElement.scrollTop或取的值加上box.offsetTop的值然后再赋给offsetTop。可是这样一直不成功,后面才清楚了offsetTop的属性是只读的。
后面从绝对定位开始考虑,想到fixed是生成绝对定位的元素,而且是相对于浏览器窗口的。恍然大悟。现在只要HTML和CSS就可以实现div左小角浮动框。去掉了js代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" href="gd.css" rel="stylesheet">
<script type="text/javascript" src="gd.js"></script>
<title>广告栏位置固定</title>
</head>
<body>
<div id="box">
</div>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
<p>撑开页面</p>
</body>
</html>
#bddy{
margin: 0px;
}
#box{
background: red;
height: 200px;
width: 200px;
position: fixed;
margin: 416px 0px 0px 0px;
}