position
- static：无特殊定位，对象遵循正常文档流，默认取该值。top，right，bottom，left 等属性不会被应用。
- relative：对象遵循正常文档流，但将依据 top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过 z-index 属性定义。
- absolute：对象脱离正常文档流，某元素将定位在框架或浏览器窗口本身或其包含块的左上角的绝对位置，使用 top，right，bottom，left 等属性进行绝对定位。而其层叠通过 z-index 属性定义。
- fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以浏览器窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过 z-index 属性定义。
transform
Transform 属性应用于元素的2D或3D转换。这个属性允许你将元素平移，缩放，旋转，倾斜。
请注意，使用此布局后，元素的 offsetTop、offsetLeft 等属性值拿到的始终是 0。
CSS3 2D 转换、CSS3 transform 属性、transfrom的基本属性及演示、CSS3 transform-origin 属性
float
脱离文档流但是不脱离文本流。
grid
flex
可以利用弹性盒子实现元素的居中布局，这主要用到两个重要属性 justify-content 和 align-items，把这两个属性值设为 center，放一个子元素，此时这个子元素就会在页面中居中，并且子元素的 offset 属性值是可用的，美中不足的是这个弹性盒子 hight 似乎必须设置一个绝对的值，不能用百分比，不过好在可以使用 css3 新增的 vh，1vh表示占视口高度的百分之一，这里可以设置100vh来设置绝对值。
vh单位
vh是viewpoint的缩写，是根据视口的大小而改变的相对单位。
- 1vh是占视口高度的百分之一
- 1wh是占视口宽度的百分之一
- 50wh就是盒子宽度占视口宽度的百分之五十
- 100wh就是盒子宽度占视口宽度的百分之百