Absolute positioning and Z-Index stacking

Question

I am trying to recreate so called skill-cirle which is popular in CV templates.

Like this

I am trying to achieve this using following code, I hope you will get an idea.

CSS

/* +++++ SKILL MODULES +++++ */
.skill-item {
  width: 100px;
  height: 100px;
  text-align: center; }
  .skill-item__title {
    color: #494949; }
  .skill-item__circle {
    border-radius: 50%;
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
    background-color: #52b3d9;
    overflow: hidden; }
    .skill-item__circle-progress {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 66px;
      background-color: #68c3a3; }
    .skill-item__circle-percent {
      display: table-cell;
      width: 100%;
      vertical-align: middle;
      color: #494949; }

/* ----- SKILL MODULES ----- */

HTML

   <div class="skill-item item">
                            <div class="skill-item__circle">
                                <div class="skill-item__circle-progress" data-percent="66"></div>
                                <div class="skill-item__circle-percent">66%</div>
                            </div>
                            <h4 class="">HTML5 + CSS3</h4>
                        </div>

Here is my result

And JSFiddle Link

As you can see my absolute positioned block overlays text block, but I need this to work vice versa. Percent text with stacked on top of the background progress block.

How can I achieve this ?

I would be grateful for any help or suggestion how to do this better.

Answer 1

Just add postion: relative; to .skill-item__circle-percent and there you go!

.skill-item__circle-percent {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  color: #494949;
  position: relative;
}

Please let me know your feedback. Thanks!

.skill-item {
  width: 100px;
  height: 100px;
  text-align: center;
}
.skill-item__title {
  color: #494949;
}
.skill-item__circle {
  border-radius: 50%;
  position: relative;
  display: table;
  height: 100%;
  width: 100%;
  background-color: #52b3d9;
  overflow: hidden;
}
.skill-item__circle-progress {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 66px;
  background-color: #68c3a3;
}
.skill-item__circle-percent {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  color: #494949;
  position: relative;
}

<div class="skill-item item">
  <div class="skill-item__circle">
    <div class="skill-item__circle-progress" data-percent="66"></div>
    <div class="skill-item__circle-percent">66%</div>
  </div>
  <h4 class="">HTML5 + CSS3</h4>
</div>

EDIT: This solution works as positioned elements (that are not static) are displayed above the elements that are not (static).