为什么给.text设置的是position的relative

同学你好，对于你的问题解答如下：

1、因为text下的子元素progress设置了绝对定位，为了让绝对定位的子元素参考其父元素进行定位，所以给text设置了position:relative;相对定位属性

2、因为相对定位（relative）是参考自身的位置进行定位的，绝对定位（absolute）是参考有定位属性（static除外）的先辈元素进行定位的，如果给text设置绝对定位（absolute），还需要给text的父元素设置定位，让text参考它的父元素进行定位，这样做比较麻烦，所以直接给text设置相对定位即可。

3、因为只有给元素设置了定位属性（static除外）之后，z-index属性才会生效，如果没有定位，z-index属性就无效，那么progress设置绝对定位会覆盖在图标上显示，导致图标无法显示，所以必须给text设置定位才可以

4、一般定位遵循的规则是“子绝父相”，意思就是子元素设置绝对定位后，给父元素设置相对定位，让子元素参考父元素进行定位，方便调整样式。

祝学习愉快~