margin-top、top、以及position的总结

子元素的margin-top属性传递给父元素的问题   

  这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会  和其内部文档流中的第一个子元素的上边距重叠。

一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

   再说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自    己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的  margin 它越级，假传圣旨，把自己的margin当领导的margin执行。

 

margin-top与top的区别

1、使用top、bottom、left、right的前提是本元素position被定义为relative、absolute和fixed中的一种，不能是static

2、使用margin-top、margin-bottom、margin-left、margin-right的元素的position可以是static、relative、absolute和fixed

 

 

position各个属性值区分

1、本元素使用position的absolute时，margin-top以及top等属性表示相对父元素中position被定义为relative、absolute和fixed中的一种，如果直接父元素中没有被定义为relative、absolute和fixed的，那么一次向上寻找，直到body为止

 

2、本元素使用position的relative时，margin-top以及top等属性首先找相邻的元素，如果相邻的元素中有被定义为relative或者static的元素，则相对相邻的元素偏移，如果相邻元素没有被定义为relative和static，则相对父元素，父元素可以是static、relative、absolute、fixed的任意一种，其中要注意本元素在四个方向上的相邻元素是不同的！

 

3、本元素使用position的fixed时，margin-top以及top等属性表示相对body

 

4、static很少使用

总结起来：absolute是相对父元素的；relative首先是相对相邻元素，如果相邻元素不满足条件再相对父元素；fixed是相对body的