相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: red;
}
.b2 {
background-color: orange;
}
/*不做定位操作*/
/*b1,b2均在文档流中,b1的布局会影响到b2*/
/*.b1 {
margin-top: 30px;
margin-bottom: 30px;
}*/
/*固定定位后*/
.b1 {
/*1.未脱离文档流*/
/*BFC规则下margin布局,上盒子依旧会影响下盒子*/
/*margin-top: 30px;
margin-bottom: 30px;*/
/*开启定位*/
position: relative;
/*具有定位方位*/
/*2.方位布局下,上盒子不会影响下盒子*/
/*left: 30px;
top: 30px;*/
/*总结:方位布局只改变盒子显示区域,不改变盒子原有位置*/
/*margin-top: 30px;*/
/*3.参考系:相对定位参考系为自身原有位置*/
/*right: 30px;*/
/*总结:方位布局就是 显示区域上|下|左|右距离自身原始位置上|下|左|右的间隔*/
/*4.left=-right top=-bottom,同时存在,左右取左,上下取上*/
left: -30px;
right: -100px;
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b2"></div>
</body>
</html>
