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; }

这两个定位常常一块使用，必定要细心，先放外层再放内层，若是有跟本身预期不同的显示先要找到哪一个定位出了问题。之后再踩到这两个定位的坑再来补充。