实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.相对定位</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: lightskyblue;
/*相对定位*/
position: relative;
top: 0;
left: 200px;
}
.box2 {
width: 200px;
height: 200px;
background-color: lightgreen;
/*相对定位*/
position: relative;
top: 200px;
left: 200px;
}
.box3 {
width: 200px;
height: 200px;
background-color: lightcoral;
/*相对定位*/
position: relative;
top: -200px;
left: 0px;
}
.box4 {
width: 200px;
height: 200px;
background-color: brown;
/*相对定位*/
position: relative;
top: -400px;
left: 400px;
}
</style>
</head>
<body><!--
定位：
四种模式：static,relative,absolute,fixed;
四个位置：left,right,top,bottom;
相对定位：元素相对于她原来在文档流中的位置进行定位 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
