<!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; /*值大的更靠近用户*/}/*静态无法被控制 其他的都可以*/
时间： 2024-10-10 02:01:33