实例
style样式，相对定位
.box1{
width: 150px;
height: 150px;
background-color: dodgerblue;
}
.box2{
width: 150px;
height: 150px;
background-color: green;
}
.box3{
width: 150px;
height: 150px;
background-color: brown;
}
.box4{
width: 150px;
height: 150px;
background-color: aquamarine;
}
.box5{
width: 150px;
height: 150px;
background-color: blueviolet;
}
.box1{
position: relative;
left: 150px;
}
.box3{
position: relative;
left: 150px;
top:-150px;
}
.box4{
position: relative;
left: 300px;
top:-300px;
}
.box5{
position: relative;
left: 150px;
top:-300px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
相对定位html页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="static/css/style12.css"> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例