<!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=10;i<20;i++){ ???????document.write(i+"<br/>"); ???}</script><div id="position3"></div><script> ???for(var i=20;i<50;i++){ ???????document.write(i+"<br/>"); ???}</script><br/><br/><br/><br/><br/><div id="position4"></div><script> ???for(var i=30;i>0;i--){ ???????document.write(i+"<br/>"); ???}</script><div id="position5"></div><div id="position6"></div></body></html>#position1{ ???width: 100px; ???height: 100px; ???background-color: mediumturquoise; ???position: relative; ???/*相对布局(无变化)*/ ???left:2px; ???/*向左偏移*/}#position2{ ???width: 100px; ???height: 100px; ???background-color: mediumturquoise; ???position: absolute; ???/*绝对布局(无变化)*/ ???left:10px; ???/*向左偏移*/}#position3{ ???width: 100px; ???height: 100px; ???background-color: forestgreen; ???position: fixed; ???/*固定布局(无变化)*/ ???z-index: 2; ???/*值大的更靠近用户*/}#position4{ ???width: 100px; ???height: 100px; ???background-color: mediumturquoise; ???position: static; ???/*静态布局(无变化)*/ ???right: 100px; ???/*向右偏移100px*/ ???left:20px; ???/*向右偏移*/ ???/*偏移无用*/}#position5{ ???width: 100px; ???height: 100px; ???background-color: mediumturquoise; ???position: relative; ???/*相对布局(无变化)*/ ???top: 20px; ???/*向上偏移100px*/ ???left:20px; ???/*向左偏移*/ ???z-index: 2; ???/*值大的更靠近用户*/}#position6{ ???width: 100px; ???height: 100px; ???background-color: coral; ???position: relative; ???/*相对布局(无变化)*/ ???left:10px; ???/*向左偏移*/ ???z-index: 1; ???/*值大的更靠近用户*/}/*静态无法被控制 其他的都可以*/HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表
原文地址：http://www.cnblogs.com/ttzzyy/p/7513000.html