<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#left,#center,#right{
float: left;
}
#left{
width: 200px;
height: 200px;
background-color: orange;
}
#center{
width: 200px;
height: 200px;
background-color: #cccccc;
/*position:relative;*/
position: absolute;
top: 80px;
left: 60px;
}
#right{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
<title>相对,绝对定位</title>
</head>
<body>
<!--相对定位：相对于元素它的原始位置进行定位
并且，元素原始占用的空间不会被其他元素占用。-->
<!--采用绝对定位的元素，会寻找离他最近的采用了定位的父元素，并以它为坐标进行定位。
如果所有的父元素都没有使用定位，则以body为坐标进行定位，
并且，元素占用的空间会被其他元素占用。-->
<div style="position: relative;top: 100px;left: 100px ">
<div>
<div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</div>
</div>
</body>
</html>
