2，给进度条增加文字显示

一个进度条需要包含对应的进度文字显示，本例中，我希望文字显示在进度条的中间。 接下来，我们在进度条元素内增加一个显示 文字的div。
很显然，直接添加div后，div会占据原先绿色进度条的位置。看下面例子：



那么有什么办法使得文字 和 绿色进度条 同时显示在 一起呢？
估计你也想到了，那就是绝对定位。通过对父元素添加相对定位，然后给子元素添加绝对定位，设置子元素的左边距和上边距都为0。
看下面的例子：



这时你会发现文字被遮盖了，相信你第一时间就会想到用 z-index 去设置他们的层级关系。
对，我也选择的是它。通过给他们设置不同的z-index值来确定层级关系，值越大越显示在上面。看下面例子：







这是第一种方式，也是目前最为流行的 制作进度条的方式。
他的原理就是采用 相对定位和绝对定位，然后通过背景不同来控制进度。 接下来我们看第二种方式制作进度条。