Position定位详细总结

 

1.margin、padding定位

 

如果没有position，在标准流中，使用margin、padding对元素进行定位是比较常见的，其中margin还可以设置负数；

 

缺点：设置一个元素的margin或padding，通常会影响到标准流中其它元素的定位效果，不便于实现元素的层叠效果；

 

那么什么是标准流呢？可以参考下面这篇文章：

 

标准流以及脱标元素的特点

 

2.CSS定位属性-position

 

利用position可以对元素进行定位，常用取值有4个：

 

2.1.静态定位-static

 

static为position属性的默认值，在不设置position属性时就是static；

 

元素按照标准流进行排布；

 

对于static，设置left、right、top、bottom是没有任何效果的；

2.2.相对定位-relative

 

元素按照标准流进行排布；

 

定位参照对象是元素自己原来的位置，可以通过left、right、top、bottom来进行位置调整；

 

相对定位应用场景：在不影响其它元素位置的前提下，可以对当前元素位置进行微调；

 

 

2.3.绝对定位-absolute

 

元素脱离标准流（脱标）；

 

定位参照对象是最近一级拥有定位的祖先元素，可以通过left、right、top、bottom来进行位置调整；

 

如果一直往上层元素找不到有定位的元素，那么最终的参照对象为视口；

 

拥有定位的祖先元素：position的值不为static的元素；

 

2.4.固定定位-fixed

 

元素脱离标准流（脱标）；

 

定位参照对象是视口（viewport），可以通过left、right、top、bottom来进行位置调整；

 

当画布滚动时，元素的位置是固定不动的；