标签：write logs osi lan idt 静态 用户 absolute href
<!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定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表
标签：write logs osi lan idt 静态 用户 absolute href
原文地址：http://www.cnblogs.com/ttzzyy/p/7513000.html
