css absolute与relative

用绝对定位和相对定位的时候有时候效果总跟自己预想的不一样，在此做个小记录。

首先建两个div一个为父一个为子

<div class="test1">

<div class="test2"></div>

</div>

.test1{ height: 300px; width: 300px; background-color: #409eff; }

.test2{

height: 50px; width: 50px; background-color: brown; margin-top: 50px; margin-left: 50px;

}

效果图：

这里发现test2设置的margin-top使父元素向下偏移了，这是因为如果父子元素上边重合就会出现这种情况，只需要在父元素顶上加个padding-top或者border或者其他的别让他俩重合就行，在test1的样式里加 padding-top: 1px; box-sizing: border-box;其中box-sizing: border-box;是为了将padding增加的尺寸限制住，平时设置padding时如果已经规定宽高那么padding会使宽高加出来，用这个可以避免，很方便。改好之后效果图跟我们想的一样了：

为了方便体现给父元素也加上上左50的外边距

然后先来给子元素加绝对定位.test2{position: absolute;},发现没有变化，因为top, left, right, bottom不设置一个不会激活absolute。

然后

.test1{ height: 300px;  
       width: 300px;  
      margin-top: 50px; margin-left: 50px; 
      background-color: #409eff;  
    padding-top: 1px;  box-sizing: border-box; 
} 
 .test2{ height: 50px;
	   width: 50px;  background-color: brown;
       /* margin-top: 50px; margin-left: 50px; */ 
     position: absolute;  top:0px; 
 }

效果：

当给top设为0子元素并没有在父元素内，这是因为绝对定位使子元素脱离了文档流并且它的父元素没有加定位，这时他会找上一级有定位的元素来做参照，如果没有就以页面为参照了，可以看到我们将test2的margin注释了，当我们打开注释发现margin依然起作用，经过我的测试发现这时的margin可以记为如果该方向上设置了比如top那么这时的margin-top可以理解为在top完成后的位置上进行了一次margin-top,而该方向如果没有top这时的margin-top与没有定位时效果相同。当然实际使用用了绝对定位后也没必要再用margin。注意绝对定位的四个方向只会以有定位的父元素祖父元素作参考。

relative是以自身为参照物，而且虽然仿佛脱离了文档流但原先的地方仍然占位，看看代码：

<div class="test1">

<div class="test2"></div>

<div class="test3"></div>

</div>

.test1{ height: 300px; width: 300px; margin-top: 50px; margin-left: 50px; background-color: #409eff; padding-top: 1px; box-sizing: border-box; }

.test2{ height: 30px; width: 50px; background-color: brown; position: relative; top:50px; } .test3{ height: 150px; width: 50px; background-color: chartreuse; }

这两个定位经常一块使用，一定要细心，先放外层再放内层，如果有跟自己预期不一样的显示先要找到哪个定位出了问题。以后再踩到这两个定位的坑再来补充。