Position属性

[nishengwai8]

   position属性想必大家都很熟悉了，相对定位、绝对定位、粘性定位、固定定位啊，啊不，没有等等，啊不不不，还有等等，不重要了～

position定位的位移计算方式与父子盒子无关，不同的定位方式，仅影响它相对计算的方式。具体的内容细节我不多说，去文档看吧。我要说的是，position的位移依赖于top、right、bottom、left属性。
　　position适用于：
all elements except table-column-group and table-column
　　也就是除了table-column-group和table-column的所有display属性值。和transform的区别就是inline也可以使用position。
相对定位（Relative，Sticky）relative；我们来看下代码：

效果是这样的：
 
 　　看起来还可以，跟translate的效果是一样的，但是实际上这样做的问题很多，并不适用大多数的实际应用场景，有很大的局限性。当我们切换父子盒子的宽高的时候，只要父盒子的一半减去子盒子的一半等于你设置的宽高，那么就可以实现水平垂直居中的效果。
　　那么百分比呢？其实百分比也跟translate是类似的。我就不再写了。要注意的是，relative是相对于自己所在位置进行相对位移的。所以，在本例的代码中展现的效果和translate十分类似。