参考文章：relative 和 absolute 元素的百分比定位、CSS进阶——绝对定位元素的宽高是如何定义的

一、设置top、right、bottom、left的值为百分比

如果没有设置top、right、bottom、left，他们默认值是auto，默认是在静态位置

相对定位relative

相对定位是按照父盒子的content-box进行计算，不论父盒子是否设置定位，子盒子都按照父盒子content-box来计算绝对定位absolute

绝对定位是按照父盒子的padding-box进行计算，绝对定位元素的包含块是由其最近的position属性设置为relative、absolute或fixed的祖先元素，如果绝对定位元素的所有祖先元素的position属性都没有设置relative、absolute或fixed，则其包含块为初始包含块。

初始包含块不是html元素，也不是body元素，而是当前视口，这一点很容易弄错

二、绝对定位元素宽高计算

以宽度为例，高度同理

left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=width of containing block

left、width、right默认值是auto，margin-left、margin-right默认值是0

如果设置了计算出来的值大于了包含块的宽度，则right被忽略。具体规则参考如下：

1表示设置得有具体值