【HTML/CSS】margin-top、top、以及position的总结

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的