标签：pre styles for rip type idt index utf-8 tle
<!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;
/*值大的更靠近用户*/
}
/*静态无法被控制 其他的都可以*/
标签：pre styles for rip type idt index utf-8 tle
原文地址：http://www.cnblogs.com/ttzzyy/p/7500940.html
