<!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:;
/*值大的更靠近用户*/
}
#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:;
/*值大的更靠近用户*/
}
#position6{
width: 100px;
height: 100px;
background-color: coral;
position: relative;
/*相对布局(无变化)*/
left:10px;
/*向左偏移*/
z-index:;
/*值大的更靠近用户*/
}
/*静态无法被控制 其他的都可以*/
