<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>CSS定位</title>
???<link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<div id="position1"></div>
<script>
???for(var i=0;i<10;i++){
???????document.write(i+"<br/>");
???}
</script>
<div id="position2"></div>
<script>
???for(var i=0;i<10;i++){
???????document.write(i+"<br/>");
???}
</script>
<div id="position3"></div>
<script>
???for(var i=0;i<50;i++){
???????document.write(i+"<br/>");
???}
</script>
<br/><br/><br/><br/><br/>
<div id="position4"></div>
<script>
???for(var i=19;i>0;i--){
???????document.write(i+"<br/>");
???}
</script>
<div id="position5"></div>
<div id="position6"></div>
</body>
</html>
css文件tzy.css
#position1{
???width: 100px;
???height: 100px;
???
???position: relative;
???/*相对布局(无变化)*/
???right: 100px;
???/*向右偏移100px*/
???left:20px;
???/*向右偏移*/
}
#position2{
???width: 100px;
???height: 100px;
???
???position: absolute;
???/*绝对布局(无变化)*/
}
#position3{
???width: 100px;
???height: 100px;
???
???position: fixed;
???/*固定布局(无变化)*/
???z-index: 2;
???/*值大的更靠近用户*/
}
#position4{
???width: 100px;
???height: 100px;
???
???position: static;
???/*静态布局(无变化)*/
???right: 100px;
???/*向右偏移100px*/
???left:20px;
???/*向右偏移*/
???/*偏移无用*/
}
#position5{
???width: 100px;
???height: 100px;
???
???position: relative;
???/*相对布局(无变化)*/
???top: 20px;
???/*向上偏移100px*/
???left:20px;
???/*向左偏移*/
???z-index: 2;
???/*值大的更靠近用户*/
}
#position6{
???width: 100px;
???height: 100px;
???
???position: relative;
???/*相对布局(无变化)*/
???left:10px;
???/*向左偏移*/
???z-index: 1;
???/*值大的更靠近用户*/
}
/*静态无法被控制 其他的都可以*/HTML学习笔记 css定位 第十二节 （原创）
原文地址：http://www.cnblogs.com/ttzzyy/p/7500940.html