在css设置可改变大小的div滚动条样式方法：
1.首先新建html文档，进入代码书写界面。
2.在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。
3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}
这里主要是设置外层轨道的形状和颜色。
4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}
这里主要是设置内层轨道的形状和颜色。
5.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。
以下直接可以运行。如果DIV在ID为area的div中，即可拖拽。我在Drag函数里做了对父div的判断。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>鼠标拖拽</title>
<script type="text/javascript">
function Drag(o, e){
if(o.parentElement!=document.getElementById('area')) return
var e = window.event || e
var _x = e.offsetX || e.layerX
var _y = e.offsetY || e.layerY
o.style.filter = 'Alpha(opacity=70)'
o.style.opacity = '0.7'
document.onmousemove = function(e){
var e = window.event || e
o.style.left = e.clientX - _x + 'px'
o.style.top = e.clientY - _y + 'px'
o.style.cursor="move"
}
document.onmouseup = function(e){
document.onmousemove = null
o.style.filter = o.style.opacity = ''
o.style.cursor="default"
}
}
</script>
</head>
<body>
<div id='area'>
<div onmousedown="Drag(this, event)" style="position:absoluteborder:1px solid redbackground:pinkwidth:400pxheight:300px"></div>
</div>
<div onmousedown="Drag(this, event)" style="position:absoluteleft:500pxborder:1px solid redbackground:pinkwidth:400pxheight:300px"></div>
</body>
</html>
1、想让div下移，使用position属性就可以调整，具体方法首先打开编辑器，新建一个html文件，写入基本的html结构，这里设置两个div，分别给它们的class属性命名为parent和child，并给parent和child的div设置好宽度和高度和不同的颜色：
2、此时打开浏览器，可以看到黄色的child在绿色的parent的div中间：
3、接着给child属性加入position属性设置为absolute，其中top、left、bottom、right四个值代表上、左、下、右的位置，这里只设置top的属性就可以下移了，其他设置为0：
4、再次打开浏览器，就会发现child下移了。以上就是网页制作中将div的位置下移的具体操作方法：
