实例
绝对定位style样式
.panter{
position: relative;
width: 450px;
height: 450px;
border: 1px dashed green;
}
.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: absolute;
left: 150px;
}
.box2{
position: absolute;
left: 150px;
bottom: 150px;
}
.box3{
left: 300px;
top: 150px;
position: absolute;
}
.box4{
position: absolute;
left: 150px;
top: 300px;
}
.box5{
position: absolute;
top: 150px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
绝对定位style样式
.panter{
position: relative;
width: 450px;
height: 450px;
border: 1px dashed green;
}
.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: absolute;
left: 150px;
}
.box2{
position: absolute;
left: 150px;
bottom: 150px;
}
.box3{
left: 300px;
top: 150px;
position: absolute;
}
.box4{
position: absolute;
left: 150px;
top: 300px;
}
.box5{
position: absolute;
top: 150px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
绝对定位style样式
.panter{
position: relative;
width: 450px;
height: 450px;
border: 1px dashed green;
}
.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: absolute;
left: 150px;
}
.box2{
position: absolute;
left: 150px;
bottom: 150px;
}
.box3{
left: 300px;
top: 150px;
position: absolute;
}
.box4{
position: absolute;
left: 150px;
top: 300px;
}
.box5{
position: absolute;
top: 150px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
绝对定位html页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="static/css/style13.css"> </head> <body> <div class="panter"> <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> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例