之前的知识点:
float:左右布局
margin:调整盒子之间的距离
padding
今天的知识点:相对定位
position:定位 固定位置 作用-可以把元素摆放到任意位置
position:relative 相对定位
要使位置发生变化,需要偏移量
参照物:根据谁来定位?在没有使用定位之前自身的初始位置
图片
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
}
.box{
width: 100px;
height: 100px;
background-color: red;
margin-left: 100px;
margin-top: 100px;
position: relative;
/* 左边的偏移量 以左边为基准偏移100像素 */
left:100px;
top:100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>